Làm Web

  • Design
  • Freebies
  • Tuts
  • Tools
  • Development
    • HTML / CSS
    • JavaScript
    • PHP
    • Ghost
  • WordPress
  • Info
    • Photography

Giải Pháp Responsive Cho Video Trên Trang Web Của Bạn

By Thien Do • 25/10/2013 • Web Development

Một trong những khó khăn trong việc thiết kế responsive là quản lý các plugin/resource bên ngoài, chẳng hạn như các video Youtube và Vimeo – chúng sử dụng embed iframe mà chúng ta thường copy và nhúng vào trong các trang web. Đây là một vấn đề mà bạn không thể kiểm soát được. Làm việc với các iframe đôi khi thật khó khăn, đặc biệt là với video và việc duy trì tỷ lệ khía cạnh. Có một số thủ thuật CSS mà chúng ta cố gắng làm responsive cho các iframe video, nhưng không thành công.

Các jQuery plugin/script đã giúp chúng ta thực hiện các công việc một cách nhanh chóng và tuyệt vời. Để xử lý tình huống trên, mình đã sử dụng FitVids.js, từ Paravel và Chris Coyier, đây là một plugin tiện lợi. Nhưng đó chính xác chưa hẳn là những gì mình muốn vì sự ‘nặng nề’ của nó. Sử dụng nhiều plugin/script chắc chắn sẽ hiệu quả hơn, và hãy đối mặt với nó, bạn không thể sử dụng duy nhất một plugin để làm responsive cho các video.

Vì vậy, hôm nay mình muốn giới thiệu đến các bạn một JavaScript để thay thế cho FitVids, nó nhẹ hơn rất nhiều, không đòi hỏi các thư viện jQuery khổng lồ – và nhanh hơn rất nhiều – đó là FluidVids.

Giải Pháp Responsive Cho Video Trên Trang Web Của Bạn

Xem Demo   Download

Cách Sử Dụng

Chỉ cần bỏ file JavaScript này vào trang web của bạn ( cần phải được đặt trước thẻ đóng </body> hoặc bên trong một DOM ready function wrapper ) và nó sẽ làm điều kỳ diệu cho bạn mà không cần đến bất cứ yêu cầu cấu hình nào.

       <!-- fluidvids.js -->
       <script src="js/fluidvids.js"></script>
</body>
</html>

Khả Năng Tương Thích Trình Duyệt

Mình đã thử nghiệm nó trên Chrome, Firefox, Opera, Safari, IE7, IE8 và IE9, và tất cả đều hoạt động tốt. Nếu bạn gặp bất kỳ vấn đề gì hoặc có một lời đề nghị về việc cải thiện FluidVids.js, có thể comment trên GitHub.

jQueryresponsiveresponsive designresponsive JavaScriptresponsive jQueryresponsive pluginresponsive scriptresponsive videothiết kế responsive
Tweet
0
Kế Hoạch Học Tập WordPress Trong Một Tuần
Font Chữ Của Ngày: Null

About the Author

Thien Do

Là một PHP developer nhưng mình muốn tìm hiểu nhiều hơn về CSS và JavaScript. Mình yêu thích những trang web đẹp và sáng tạo, đó là lý do tại sao mà mình thích chia sẻ chúng với các bạn.

You Might Also Like

  • Làm Thế Nào Để Tạo Ra Các Hiệu Ứng Động CSS3 Mà Không Cần Viết Code

  • 3 Giải Pháp Hỗ Trợ Hiệu Quả Trên Internet Explorer

  • Border-radius: Tạo Góc Tròn Với CSS!

  • Tùy Chỉnh Scroll Bar Của Trình Duyệt Với CSS / jQuery

    Tùy Chỉnh Scroll Bar Của Trình Duyệt Với CSS / jQuery

Liên hệ mua trang web này

Email: info@thiendo.com
Phone: 0914 22 12 02

Bài viết được quan tâm

CSS position: fixed Trong Các Trình Duyệt Di Động

On 08/07/2013
01

Xu Hướng Mới Trong Thiết Kế Web

On 06/08/2013
02

19 Ví Dụ về Thiết Kế Web Tối Giản

On 16/07/2013
03

25 Bài Hướng Dẫn Tạo Hiệu Ứng Chữ Đẹp với CSS3

On 16/06/2013
04

Fontbox.vn – Thư viện Font Tiếng Việt tuyệt đẹp

On 05/06/2013
05

Find us on Facebook

Lamweb.com
Facebook Twitter

LÀM WEB - CHIA SẺ THÔNG TIN, XU HƯỚNG, CÔNG NGHỆ VÀ CÁC THỦ THUẬT WEB

© 2019 LamWeb.com - All rights reserved.