サイバーセキュリティ＆人工知能研究所

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

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

2013/08/02 : TechReports

はじめに

　サイトで Youtube の動画を紹介する場合に、iframe タグで囲まれた「埋め込みコード」を貼りつけますが、固定サイズのため、画面サイズがレスポンシブに変わってくれません。

---

せっかく、Twitter Bootstrap 等でレスポンシブに対応しても、動画のサイズが固定なままでは、はみ出したりして見た目が台無しです。

そこでいろいろと調べたり試行錯誤した結果、比較的簡単に実装できる方法を見つけたので公開します。

方法は下記のように、CSS で定義した YoutubeWrapper クラスを指定した div で、埋め込みコードの iframe タグのブロックを囲むだけです。

CSS 内の数値は、実装するサイトのデザインに合わせて調整してください。

ＣＳＳ

.YoutubeWrapper{
　position: relative ;
　margin-top: 1.2em ;
　margin-bottom: 1.2em ;
　padding-top: 69px ;
　padding-bottom: 50% ;
　overflow: hidden ;
}

.YoutubeWrapper iframe {
　position: absolute ;
　top: 0 ;
　left: 0 ;
　height: 100% ;
　width: 100% ;
}

ＨＴＭＬ

<div class="YoutubeWrapper">
　<!--	埋め込みコード(ここから)	-->
　<iframe ・・・></iframe>
　<!--	埋め込みコード(ここまで)	-->
</div>

サンプル

ブラウザの横幅を変化させると、動画のサイズがレスポンシブに変化するのが確認できます。

おまけ

YouTube の動画の一部分だけを再生する方法を紹介します。
下記のように、埋め込みコードに再生開始位置(start)と終了位置(end)を先頭からの秒数で指定します。
指定された部分には、くさび形のマークが表示されます。

<div class="YoutubeWrapper">
　<!--	埋め込みコード(ここから)	-->
　<iframe width="480" height="360" src="//www.youtube.com/embed/dFf4AgBNR1E?rel=0&start=100&end=200" frameborder="0" allowfullscreen></iframe>
　<!--	埋め込みコード(ここまで)	-->
</div>

記述に際しては、細心の注意をしたつもりですが、間違いやご指摘がありましたら、こちらからお知らせいただけると幸いです。

→「悪用厳禁！？　Windows7 のネットワーク・ツール１２＋１」
←「Google Analyticsで自分のアクセスを除外する方法」


«　戻る