wivern ロゴ

サイバーセキュリティ研究所

サイバーセキュリティを中心に、軍事、防犯、サーバーの管理と監視、その他、最新技術を研究しています。


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

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

はじめに
 サイトで Youtube の動画を紹介する場合に、iframe タグで囲まれた「埋め込みコード」を貼りつけますが、固定サイズのため、画面サイズがレスポンシブに変わってくれません。
せっかく、Twitter Bootstrap 等でレスポンシブに対応しても、動画のサイズが固定なままでは、はみ出したりして見た目が台無しです。

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

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

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

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% ;
}
HTML
<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 のネットワーク・ツール12+1」
←「Google Analyticsで自分のアクセスを除外する方法」


« 戻る