WEB帳
Youtubeの埋め込み動画をCSSでレスポンシブ対応し縦横の比率を保ったまま伸縮させる方法

Youtube動画の埋め込みコードをそのまま張り付けると、レスポンシブ構造の場合に小さくした時に動画が小さくならず厄介です。 しかし、下記のCSSを設定すると問題なくブラウザに合わせてYoutubeの埋め込み動画が縦横の比率を保ったまま伸縮します。

CSS

<style type="text/css">
<!--
.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
-->
</style>

幅の56.25%を高さに設定する理由は、HD動画（16:9）の場合に100 / 16 * 9 = 56.25%となるからだそうです。

HTML

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

iframeにwidthとheight属性が入っていても、CSSのwidthとheightに!importantが設定されているためCSSが優先されます。

DEMO

ブラウザのサイズに合わせて縦横の比率を保ったままYoutube動画のサイズも伸縮します。

【参考Webサイト】

• Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法
• iframe要素（Youtubeなど）のレスポンシブ対応

コメント（0件）

Youtubeの埋め込み動画をCSSでレスポンシブ対応し縦横の比率を保ったまま伸縮させる方法に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet