【CSS】レスポンシブサイトで、スマホ時のYoutube画面のサイズを調整する

レスポンシブサイトでYoutubeのタグを貼った際の、画面サイズ調整の設定をメモしておきます。

HTML

<div class="youtubeBox">
	<iframe src="https://www.youtube.com/embed/XXXXXXXX" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

スタイルシート

@media only screen and (max-width: 786px) { 
	.youtubeBox { 
		position: relative; 
		width: 100%; 
		padding-top: 56.25%; 
		}
	.youtubeBox iframe { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100% !important; 
		height: 100% !important; 
		}
 }