youtubeの埋め込み動画は、デフォルト設定ではレスポンシブ対応になっていないため、css側で調整してあげる必要があります。
youtubeの埋め込み動画をレスポンシブにする方法
まずはyoutubeの共有リンクから、埋め込み動画のURLを取得します。余談ですが、最近になって遅まきながらはじめしゃちょーにハマってたりします。
こちら、ソースコードを見ると分かるのですが、iframeのHTMLタグに、直接widthとheightのスタイルシート指定がされています。
<iframe width="560" height="315" src="https://www.youtube.com/embed/sFaN1AvWnjc" frameborder="0" allowfullscreen></iframe>
そのため、iframeに関して、width:100%;と指定してあげれば、OKです。
iframe{
width:100%;
}
ただ、この方法だと、youtubeの埋め込み動画以外にiframeを使用していた場合、そのiframeのサイズもwidth:100%;になってしまいます。
そのため、youtubeの埋め込み動画URLの前後にdivタグなどを囲み、要素名を指定し、そのiframeだけwidth:100%;になるように設定しておくと安心です。
<div class="youtube_movie">
<iframe width="560" height="315" src="https://www.youtube.com/embed/sFaN1AvWnjc" frameborder="0" allowfullscreen></iframe>
</div>
.youtube_movie iframe{
width:100%;
}
まとめ
個人的に思うのが、最初からwidth100%にしておいてくれよ、ということでした。
