Làm sao để iframe của Videos Youtube responsive trong WordPress

Cập nhật lần cuối 28/11/2016 by trong WordPress vào 28/11/2016 có 2253 Views

Trong bài này chúng ta sẽ làm cho iframe video của youtube full-width và responsive. Qua  bài Cách lấy Youtube video ID từ URLGet ID, times length and thumbnail image youtube video by URL và Chèn video youtube vào wordpress bằng shortcode chúng ta cũng hiểu rõ hơn về các lấy ID và chèn video vào bài viết.

Thêm 1 DIV bao khoanh iFrame trong bài viết

Đoạn code này sẽ giúp chúng ta thêm 1 DIV bao quanh iframe của video youtube. Thêm vào file functions.php

<?php
/*
* Add to functions.php 
* Add div.videoWrapper to iframe
*/
function div_wrapper($content) {
   // match any iframes
   /*$pattern = '~<iframe.*</iframe>|<embed.*</embed>~'; // Add it if all iframe*/
   $pattern = '~<iframe.*src=".*(youtube.com|youtu.be).*</iframe>|<embed.*</embed>~'; //only iframe youtube
   preg_match_all($pattern, $content, $matches);
   foreach ($matches[0] as $match) {
     // wrap matched iframe with div
     $wrappedframe = '<div class="videoWrapper">' . $match . '</div>';
     //replace original iframe with new in content
     $content = str_replace($match, $wrappedframe, $content);
   }
   return $content; 
}
add_filter('the_content', 'div_wrapper');
?>

Css để respon

Thêm đoạn code css này vào file style.css của theme

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

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

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

5/5 - (10 votes)
Từ khóa:
  • Bình luận
Sản phẩm nổi bật của Toản
x