WordPress YouTube動画をレスポンシブ対応

①functions.phpに以下を記述する
function tdd_oembed_filter($html, $url, $attr, $post_ID) {
if ( strstr( $url,’youtu’ ) ) {
$return = ‘<div class=”video-container”>’.$html.'</div>’;
}else{
$return = $html;
}
return $return;
}
add_filter( ‘embed_oembed_html’, ‘tdd_oembed_filter’, 10, 4 ) ;

②style.cssに以下を記述する
.embed-youtube,
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom:15px;
}
.embed-youtube iframe,
.embed-youtube object,
.embed-youtube embed,
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

RELATED POSTS