Thêm video vào nội dung bài viết sẽ giúp bài viết sinh động, trực quan hơn. Nhưng nếu các bài viết được xem trên các thiết bị có màn hình nhỏ, thì những video này có thể hỏng giao diện của website bạn. Do đó responsive cho video là một công việc cần thiết phải làm.
Responsive HTML5 video
Một tính năng khá hay ho trong HTML5 là chèn trực tiếp video vào mà không cần dùng flash. Responsive HTML5 video rất đơn giản rất giống với responsive các hình ảnh.
video { max-width: 100%; height: auto; }
Responsive Youtube Video
Youtube là một thư viện video lớn và có nhiều người sử dụng nó để quản lý các video, cũng như chèn video vào bài viết. Để responsive youtube video đầu tiên là HTML code
<div class="video-container"> <iframe src="https://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe> </div>
Sau đó theo đoạn CSS này
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Vậy là xong Youtube video đã được responsive.
Responsive bằng FitVids
FitVids là một plugin của jQuery giúp tự thêm responsive video cho các video. Bạn có thể download FitVids và thêm nó vào website. Sau đó thêm đoạn javascript sau vào website. Với selector
là phần tử chứa video bên trong. Ví dụ như phần tử bao bên ngoài video là .video-container
$(document).ready(function(){ // Target your .container, .wrapper, .post, etc. $("selector").fitVids(); });
Nếu sử dụng WordPress thì bạn cũng có thể sử dụng plugin FitVids for WordPress. Cách sử dụng có thể thaom khảo tại: How to Make Your Videos Responsive in WordPress with FitVids.
Tóm lại
Hy vọng bài viết sẽ giúp ích cho bạn trong việc Responsive cho video. Thắc mắc, góp ý bạn có thể để lại comment bên dưới hoặc thông qua Twitter.