YouTubeの埋め込みをレスポンシブに対応。

2020.04.22 / Notes

YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。

<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/xxxxxxxxxx"></iframe>
</div>

</div>

div.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 比率が16:9の場合 */
}
div.video-wrapper iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}

div.video-wrapper {

position: relative;

padding-bottom: 56.25%; /* 比率が16:9の場合 */

}

div.video-wrapper iframe {

position: absolute;

width: 100%;

height: 100%;

left: 0px;

top: 0px;

}

WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript（jQuery）で一括で処理を行っておくと便利です。

$("iframe[src*='youtube.com']").each(function() {
	$(this).wrap("<div class=\"video-wrapper\"></div>");
});

$("iframe[src*='youtube.com']").each(function() {

$(this).wrap("<div class=\"video-wrapper\"></div>");

});