youtubeの動画をサイトに埋め込む際にレスポンシブ対応にする方法メモ

• webナレッジメモ

表題のとおりですが、以下の方法でうまくできたのでメモ。

【html】[html]
<div class="ytArea">
< youtube埋め込みソース >
</div>
[/html]

【css】[css]
.ytArea {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.ytArea iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
[/css]