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

web制作

読了の目安時間: 142

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%にしておいてくれよ、ということでした。

キヨタツ
キヨタツの一言

動画作成も面白そう・・・

今読んだ記事をシェアする

tube-thumb

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

  • このエントリーをはてなブックマークに追加
  • Pocket

このブログサイトが参考になった人は、いいねボタン! 更新情報も受け取れます!

arrow
デル株式会社
  • Pocket
  • このエントリーをはてなブックマークに追加

キヨタツ

キヨタツ

WEBを中心に、色々な制作をする個人事業主です。過去、エンジニア&webディレクターで会社勤めをしていました。主に要件定義や構築が得意で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。現在、サーバー・アプリなどを習得中です。性格は、自虐好きです。