Hướng dẫn tối ưu Responsive Video Youtube chèn lên Website

Bạn dán mã nhúng video youtube trực tiếp vào website nhưng trên thiết bị di động lại bị tràn màn hình, không theo giao diện điện thoại. Trong bài viết này mình sẽ hướng dẫn các bạn tối ưu từ việc nhúng video youtube đưa lên website theo chuẩn giao diện mobi. Việc tối ưu này sẽ giúp người dùng có được trải nghiệm tốt hơn.

Đoạn mã code này cũng tối ưu hơn việc bạn thêm thẻ div sau đó mới nhúng video, như thế sẽ mất rất nhiều thời gian. Trong đoạn code này khi xuất hiện thẻ <iframe> của youtube sẽ tự động thêm thẻ <div> có chứa class “videoWrapper“.

Bạn chèn code này vào file function.php

function div_wrapper($content) {
   $pattern = '~&lt;iframe.*src=".*(youtube.com|youtu.be).*&lt;/iframe&gt;|&lt;embed.*&lt;/embed&gt;~';
   preg_match_all($pattern, $content, $matches);
   foreach ($matches[0] as $match) {
     $wrappedframe = '&lt;div class="videoWrapper"&gt;' . $match . '&lt;/div&gt;';
     $content = str_replace($match, $wrappedframe, $content);
   }
   return $content; 
}
add_filter('the_content', 'div_wrapper');

Bạn chèn đoạn css này vào file style.css của theme nhé.

.videoWrapper {
   position: relative;
   padding-bottom: 56.25%;
   padding-top: 25px;
   height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

Bây giờ bạn nhúng thử video trên youtube lên website và kiểm tra kết quả.

Hướng dẫn nhúng video từ Youtube lên Website WordPress