6

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

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.

Nhấn vào đây để nhận xét 6 nhận xét
Blog mẹ YÊU - last year

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

Trả lời
duong - last year

cam on ban

Trả lời
pc12h - 11 months ago

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

Trả lời
Tiến Dũng - 8 months ago

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

Trả lời

Gửi một nhận xét: