Youtube埋め込み動画をcssでレスポンシブサイズにする方法

Youtubeの埋め込み動画をレスポンシブに対応させる方法

HTMLソースの確認をしよう

まずはyoutubeの共有リンクから、埋め込み動画のURLを取得しましょう。

で、ソースコードを見ると分かるのですが、iframeのHTMLタグに、直接widthとheightのスタイルシート指定がされています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/sFaN1AvWnjc" frameborder="0" allowfullscreen></iframe>

なので、解決方法としては、ここをcssで調整してあげればOKです。

CSSでiframeの指定調整でOK

iframeに関して、width:100%;と指定してあげましょう。

iframe{
  width: 100%;
}

しかし、この方法だと、youtubeの埋め込み動画以外にiframeを使用していた場合、そのiframeのサイズもwidth:100%;になってしまいます。

もしyoutubeのiframeを分別させたい時は、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>

↓ divのclassとセットで指定

.youtube_movie iframe{
  width:100%;
}

まとめ

youtubeの埋め込み動画はiframeなので、css調整してあげればOKです。

個人的には、埋め込んだらそのままレスポンシブ対応になっていれば便利なのになぁと思いますが、贅沢を言ってはダメですね。