Code CSS Responsive Video WordPress cần thiết cho bạn!

Code CSS Responsive Video WordPress cần thiết cho bạn! Mỗi khi tiến hành chèn video từ youtube vào website nó sẽ không tự responsive được? Vậy bạn phải làm gì đây? có phải bạn sẽ ngồi fix lại từng css cho cái video vừa chèn vào không? Nếu vậy bạn hãy tham khảo được code chỉnh css responsive này nhé.

Code CSS Responsive Video 100% thành công nhé

Khi bạn tiến hành chèn video vào website wordpress là việc làm quá dễ dàng, chỉ cần copy url chia sẻ trực tiếp trên youtube -> pass vào trang bạn đang viết bài -> cập nhật là bạn đã chèn thành công video vào trang web bạn rồi.

Thế nhưng một việc làm tưởng chừng quá đơn giản nhưng không phải ai cũng làm thành công, thật vậy đối với những website đã chèn video thành công rồi nhưng vẫn gặp khó khăn đó là làm sao cho video responsive được? Đây mới là vấn đề cần giải quyết nhé

Vì vậy mình xin chia sẻ Code CSS Responsive Video WordPress

Đoạn Code CSS Responsive Video WordPress mình đã áp dụng cho website cung cấp dịch vụ thiết kế website tungphat.com và đã thấy thành công 100%, các bạn chỉ cần thực hiện theo hướng dẫn sau:

Bạn tiến hành copy đoạn code này vào file functions.php

 

/* Add responsive container to embeds
/* ———————————— */
function alx_embed_html( $html ) {
return ‘<div class=”video-container”>’ . $html . ‘</div>’;
}

add_filter( ’embed_oembed_html’, ‘alx_embed_html’, 10, 3 );
add_filter( ‘video_embed_html’, ‘alx_embed_html’ ); //

Đây chính là phần quan trọng nhất của bài viết này đó là Code CSS Responsive Video WordPress

.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%; }

Tóm lại: Đây là đoạn để thực hiện được responsive video trong website wordpress bạn cần phải kết hợp giữa code chèn vào file functions.php và code css mới thực hiện được. Chúc bạn thành công trong việc fix css responsive video cho website mình => và thường xuyên truy cập website tungphat.com để xem thêm code css cần thiết cho website mình nhé.

Tác giả: Admin- website: Tungphat.com

Chia sẻ bài viết