WordPress のYouTube埋め込みの iframe をレスポンシブ対応する

WordPress で埋め込まれた YouTube のブロックを自動でレスポンシブに対応します。

全ての iframe ではなく、src に youtube が含まれている iframe だけに対応します。
↓今回はデモページはありません。。。。

JSを読み込みます

if ( is_single() ) {
wp_enqueue_script( 'js_youtube', get_template_directory_uri() . '/js/js_youtube.js',  array('jquery'), false, true );
}

jQuery[js_youtube.js]

jQuery(document).ready(function () {
	$(function () {
		$('iframe').each(function () {
			let frame = $(this);
			let div = document.createElement('div');
			div.className = 'youtube';
			if ((frame.is('[src*="youtube"]'))) {
				$(this).wrap(div);
			}
		});
	});
});

CSS

/* youtube
-----------------------------------------*/
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}

.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}