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

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.

Click để xem demo

Cách Sử Dụng

Chỉ cần thêm đoạn code dưới đây vào trước thẻ đóng </body>, fluidvids plugin sẽ thực hiện responsive video trên website của bạn

<!-- fluidvids.js -->
<script src="js/fluidvids.js"></script>
<script>
      fluidvids.init({
          selector: 'iframe',
          players: ['www.youtube.com', 'player.vimeo.com']
      });
</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.

Download Source

Related Post


Nofollow cho các liên kết ngoài sử dụng jQuery
Wednesday, December 11, 2013
Hôm nay mình sẽ hướng dẫn các bạn đặt link Nofollow cho tất cả các liên kết ngoài( hay External Links), cái này nhằm “thông báo” cho thằng Google( hoặc Boot khác) rằng “mày đừng đi vào những link đó”.
Thêm link "Read more" khi copy nội dung từ website của bạn
Thursday, October 10, 2013
Vào năm 2009, một công ty có tên Tynt giới thiệu một dịch vụ miễn phí giúp cho các chủ sở hữu website có thể thêm một đường link xem chi tiết (read more) vào phía dưới các nội dung text được sao chép từ website của họ, nó như một công cụ tạo backlink tự động, hỗ trợ tốt cho việc SEO website của bạn. Ngay nay có rất nhiều website áp dụng phương pháp này, và thực sự nó rất dễ để sử dụng. Ở bày này chúng ta sẽ tìm hiểu cách áp dụng tính năng này vào website như thế nào.
Search

Đăng ký nhận bài mới


Category

Blog Archive