Hướng dẫn hiển thị Responsive cho video Youtube trên Website WordPress

Responsive là cái không bắt buộc, nhưng phải có (@@) đối với tất cả các website hiện nay. Nó cho phép hiển thị nội dung trang web tương thích với mọi thiết bị: máy tính, máy tính bảng, di động, và biết đâu sau này còn cả dao cạo râu thông minh, toilet thông minh nữa…

Hầu hết các giao diện hiện nay đều thiết kế dạng responsive, nhưng đôi khi các lập trình viên bỏ qua làm responsive cho video. Tất nhiên không phải là họ không biết làm, chỉ là họ không thích làm, thế thôi. Tôi thì tôi đoán rằng nếu họ làm thì chúng tôi sẽ phải viết bài: Hướng dẫn không hiển thị responsive cho video…. (Đùa đấy, các bác đừng đáp gạch)

Có vài cách để các bạn hiển thị responsive cho video, sau đây tôi sẽ hướng dẫn các bạn cách mà nếu các bạn thích hiển thị responsive cũng được, mà không thích hiển thị cũng được, tùy lựa chọn.

Cách 1: Chỉnh sửa file functions.php và style.css

Các bạn mở file functions.php của theme lên, thêm đoạn code sau:

add_filter( 'embed_oembed_html', 'custom_oembed_filter', 10, 4 ) ;
  function custom_oembed_filter($html, $url, $attr, $post_ID) {
$return = '<div class="video-container">'.$html.'</div>';
return $return;
}

Đồng thời thêm đoạn code sau vào file style.css cũng của theme đó:

.video-container {
position: relative;
padding-bottom: 52.75%;
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%;
}

Chỉ có thế thôi, xong rồi đó. Đến đây nếu bạn cần hiển thị responsive cho video nhúng từ Youtube, hãy mở video đó lên, click vào Share, copy đường link và paste vào khung soạn thảo của WordPress.

Còn nếu không muốn hiển thị responsive, hãy chuyển qua tab Embed, copy đoạn code iframe rồi paste vào khung soạn thảo, code này cho phép các bạn có những lựa chọn như chiều cao, chiều rộng, đường viền video…

Cách 2: Dùng plugin Advanced Responsive Video Embedder

Cách này nhanh, đỡ đau đầu. Các bạn tải plugin tại địa chỉ: http://wordpress.org/extend/plugins/advanced-responsive-video-embedder/

Dùng plugin thì tiện thật đấy, nhưng không nên dùng nhiều, tùy các bạn lựa chọn cách nào phù hợp nhé.