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 30 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.

Tác giả: Ninh Đôn

Một YouTube Partner & Internet Marketer tại Việt Nam.

Tôi bắt đầu kiếm tiền trên mạng từ 2010, khi tôi 16 tuổi và đã từ bỏ công việc ngày 8 tiếng cố định từ 4 năm về trước để dành 100% thời gian làm việc trên Internet.

Tôi kiếm được hàng ngàn đô la mỗi tháng chỉ đơn giản với chiếc Laptop bằng việc tạo ra những nội dung tuyệt vời cho người dùng và kiếm lợi nhuận từ quảng cáo.

Theo dõi tôi trên mạng xã hội:

Leave a Comment:

6 comments
Blog mẹ YÊU says 15/01/2016

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

Reply
duong says 21/01/2016

cam on ban

Reply
pc12h says 03/03/2016

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

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

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

Reply
sơn says 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
Add Your Reply