Hướng dẫn hiển thị Video dạng Reponsive trong WordPress không dùng Plugin

WordPress
Hướng dẫn hiển thị Video dạng Reponsive trong WordPress không dùng Plugin
4.7 31 votes

Mặc định trong WordPress cho phép chúng ta hiển thị hình ảnh, Video từ các mạng xã hội nổi tiếng như YouTube, Vimeo, Dailymotion, Imgur… bằng cách rất đơn giản bạn chỉ cần Copy đường Link và dán vào trong bài viết mà thôi. Thế nhưng có một vấn đề hiện nay rằng đa phần người dùng truy cập vào trang web bằng Mobile? Thế thì nếu chúng ta không điều chỉnh, kích thước Video sẽ làm cho trang web bị vỡ khung hoặc hiển thị không đúng kích thước chuẩn.

video hiển thị không đúng kích thước
video hiển thị không đúng kích thước

Hướng dẫn hiển thị Video chế độ Reponsive

Để làm được điều này, bạn hãy làm theo những bước sau mà mình sẽ hướng dẫn ngay sau đây:

Đầu tiên, đăng nhập vào quản trị của website WordPress => Giao diện => Sửa => Mở file Functions.php

function ninhdon_embed_html( $html ) {
return '<div class="video-container">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'ninhdon_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'ninhdon_embed_html' ); // Jetpack

Sau đó, tìm đến File style.css trong Theme và thêm đoạn mã này vào:

.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Sau khi thêm đoạn mã này, trang web của bạn sẽ hiển thị Video ở dạng chuẩn, tỉ lệ 16:9 HD. Dưới đây là kết quả sau khi mình chỉnh sửa:

Video Reponsive
Video Reponsive

Bằng cách này bạn sẽ đỡ phải sử dụng các Plugin khác như FitVids.JS, làm cho tốc độ tải trang của trang web bạn chậm hơn.

Ninh Đôn

Tác giả: Ninh Đôn

Một Internet Marketer/ Video Creators tại Việt Nam.

Founder of NinhDon.com/ CEO First.vn và nhiều dự án khác bạn sẽ được khám phá khi ghé thăm nơi đây...Xem chi tiết

Có thể bạn sẽ thích

6 thoughts on “Hướng dẫn hiển thị Video dạng Reponsive trong WordPress không dùng Plugin

  1. Xin chào. website của mình có cài Jwplayer 7. Mình upload video lên thư viện và chèn vào web thì hiển thị xem bình thường trên desktop. nhưng trên mobile click vào thì nó chỉ cho tải video về chứ không xem được. Có cách nào giúp mình không?

Leave a Comment

0 Shares
Share
+1
Pin
Tweet