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.
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.
