［YouTube］埋め込み動画をレスポンシブさせる確実なやり方

どのブログを見ても、詰めが甘く参考にならないので書いておく。

コードの要点

埋め込みiframeをボックス要素で二重にネスト
ブレークポイント768px（iPad縦表示）以上で、iframe直上ボックスのpaddingを解除
ブレークポイント768px以上で、iframeの横幅と高さをピクセル固定・相対配置に
height 0 / overflow hiddenなどは不要

<article class="block-youtube">
<div class="inner-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7_B4Q2WcLTo?list=PLDus_yCXcTNFtfHBv-vfJOE_5hlT_YPsX?ecver=1" frameborder="0" allowfullscreen></iframe>
<!-- /.inner-youtube --></div>
<!-- /.block-youtube --></article>

<article class="block-youtube">
<div class="inner-youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/97H9pmSRsbw?ecver=1" frameborder="0" allowfullscreen></iframe>
<!-- /.inner-youtube --></div>
<!-- /.block-youtube --></article>

</div>

</article>

</div>

</article>

.block-youtube {
	margin-bottom: 20px;
}

.inner-youtube {
	position: relative;
	padding-bottom: 56.25%;

	@include min(768) {
		padding-bottom: 0;
	}

	iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		@include min(768) {
			width: 560px;
			height: 315px;
			position: static;
		}
	}
}

.block-youtube {

margin-bottom: 20px;

}

.inner-youtube {

position: relative;

padding-bottom: 56.25%;

@include min(768) {

padding-bottom: 0;

}

iframe {

width: 100%;

height: 100%;

position: absolute;

left: 0;

top: 0;

@include min(768) {

width: 560px;

height: 315px;

position: static;

}

鼻ちょうちん

［YouTube］埋め込み動画をレスポンシブさせる確実なやり方

コードの要点

コメントを投稿する返信をキャンセル

［YouTube］埋め込み動画をレスポンシブさせる確実なやり方

コードの要点

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル