Trong quá trình phát triển website chắc anh em đã gặp qua vấn đề với responsive khi embed youtube iframe, khi chuyển sang giao diện di động, iframe youtube không được responsive gây vỡ giao diện, hôm nay mình sẽ hướng dẫn các bạn cách xử lý nhanh trường hợp này bằng code nhé, mình làm luôn example shortcode cho wordpress để các bạn làm wordpress có thể ứng dụng code vào website mình luôn.

Nội dung 1: Sử tạo youtube responsive bằng html cơ bản

Bước 1: Trước tiên, bạn sẽ cần thêm đoạn code sau vào CSS để định kiểu hiển thị cho khung youtube của bạn.

.youtube-wrap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}</code></code>.youtube-wrap iframe,
.youtube-wrap object,
.youtube-wrap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Bước 2: Đưa đoạn html này vào nơi bạn cần hiển thị (lưu ý: vAy5U1Vbnb4 là id của link youtube của bạn)

Bước 2: Tạo wordpress shortcode theo cấu trúc code sau:

function create_youtube_shortcode($args,$content){
if(!empty($args["id"])){
return '<div class="youtube-wrap"><iframe width="853" height="480" src="https://www.youtube.com/embed/'.esc_attr($args["id"]).'" frameborder="0" allowfullscreen></iframe></div>';
}
}
add_shortcode( 'youtube_shortcode', 'create_youtube_shortcode' );

Bước 3: test thử shortcode của bạn bằng cách đưa vào bài viết dạng:

[youtube_shortcode id="{id_youtube}"]

Hoặc có thể hiển thị shortcode trên bất kì vị trí nào bạn mong muốn bằng hàm php wordpress cung cấp:

echo do_shortcode("[youtube_shortcode id="{id_youtube}"]");

Chúc bạn thành công !