MỤC LỤC BÀI VIẾT
Làm sao để iframe của Videos Youtube responsive trong WordPress
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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%; } |
