Hướng dẫn Responsive cho video

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.