1. TOP
  2. CSS
  3. Youtube動画の埋め込みをCSSでレスポンシブ対応する

Youtube動画の埋め込みをCSSでレスポンシブ対応する


スポンサードリンク

おはこんばんちわハクロンです。
普通にwidth="100%"などの対応ではスマホなどで見た場合縦幅がそのままになってしまうなど、そのままの比率でうまく縮小されません。
Youtubeなどの外部サービスを埋め込む際にCSSでレスポンシブ対応させる簡単な方法を書きます。


HTML側の記述 divタグでclassをつけます。
<div class="youtube">
<iframe width="854" height="480" src="https://www.youtube.com/embed/cLYAVPgrWME" frameborder="0" allowfullscreen></iframe>
</div>


CSS側の記述
.youtube {
  position: relative;
  width: 100%;
  padding-top: 50%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}


これだけで対応完了です。縮小しても画面の比率は変わりません。
iframeのwidth heightより!importantルールを使うことでCSSスタイルを優先することができます。


ちょっとした贅沢?
「HTML/CSSに関する書籍」を
アマゾンで探す     

スポンサードリンク

コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。