CSS full width responsive embed youtube

Khi bạn nhúng một video trên youtube vào website của bạn, không chỉ riêng wordpress, mặc định video sẽ có kích thước cố định, không full width và cũng chẳng responsive cho các thiết bị.

Để giải quyết vấn đề này, rất đơn giản chỉ với vài dòng css.

Trước tiên, chúng ta nên xem qua cấu trúc html của đoạn embed sẽ như sau:

<div class="wrap_embed">
<!--Đoạn code embed có thể là như sau->
<iframe width="500" height="281" src="https://www.youtube.com/embed/5QfXwgkJITA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>

Khi đó, chúng ta thêm đoạn CSS như sau:

.wrap_embed { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
  
.wrap_embed iframe,
.wrap_embed object,
.wrap_embed embed,
.wrap_embed video { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0;
  width: 100%;
  height: 100%;
}

Đối với đoạn code html như trên, chúng ta chỉ cần dùng tới css .wrap_embed iframe, tuy nhiên mình thêm các dòng cho object, embed, video trong trường hợp thẻ embed không dùng iframe

Nếu bạn đang sử dụng wordpress 5 trở lên, khi chèn một video youtube vào bài viết, mặc định sẽ sinh ra cấu trúc html như sau:

<figure>
<div class="wp-block-embed__wrapper">
<!--Đoạn code embed có thể là như sau->
<iframe width="500" height="281" src="https://www.youtube.com/embed/5QfXwgkJITA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
</figure>

Khi này, bạn không cần quan tâm tới thẻ figure, và sử dụng class cho

lớp bên ngoài liền kề là wp-block-embed__wrapper thay vì wrap_embed.

Đối với các bạn dùng wordpress thấp hơn, hoặc vì một số lý do nào đó mà khi chèn video youtube vào bài viết, không tự sinh ra thẻ

lớp bên ngoài Các bạn có thể thêm dòng sau vào function.php của theme đang sử dụng:

function dcv_embed_html( $html ) {
  return '<div class="wrap_embed">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'dcv_embed_html', 10, 3 );
add_filter( 'video_embed_html', 'dcv_embed_html' );

Tương tự với các website không dùng wordpress…

Cùng chuyên mục