![](https://cxg-design.jp/wp-content/uploads/2024/04/wpbanner02.png)
WP YOUTUBE RESPONSIVE
YouTubeブロックをレスポンシブ対応にするためのコードです。
PHPはfunctions.phpに記入します。CSSはfunctions.phpの投稿スタイル内に記入します。
/*投稿ユーチューブレスポンシブ*/
function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}