6

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

WordPress

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.

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

Một YouTube Partner & Internet Marketer tại Việt Nam.
Mình yêu thích Internet và sử dụng chúng để phát triển cuộc sống của mình và những người khác và Blog này được thành lập đơn giản là nơi mà mình sẽ chia sẻ những bài học và thất bại trong quá trình kiếm tiền trên mạng nhằm giúp bạn giảm thiểu thời gian thành công và đạt được thu nhập thụ động.
Internet đã thay đổi cuộc sống của tôi, và nó có thể làm những điều tương tự và hơn thế với bạn. Bạn muốn biết sức mạnh của Internet chứ, hãy xem hành trình của tôi.

Click Here to Leave a Comment Below 6 comments
Blog mẹ YÊU - 15/01/2016

Cái này chèn vào thì trên destop nó hiển thị sao ta ?

Reply
duong - 21/01/2016

cam on ban

Reply
pc12h - 03/03/2016

Cảm ơn Đôn nhiều.Đã làm theo và thành công

Reply
Tiến Dũng - 06/06/2016

Đã thử và thành công, thanks bro

Reply
sơn - 07/03/2017

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?

Reply

Leave a Reply: