Blog

HOME > Web > css > 【CSS】Youtube動画のアスペクト比を固定する方法

【CSS】Youtube動画のアスペクト比を固定する方法

2018/03/25

css

備忘録です。

参考サイト
youtubeの動画をCSSでアスペクト比固定で表示する。

HTML

<div class="iframe-wrapper">
  <!-- youtubeの動画 -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/cl-KAl2Xlug" frameborder="0" allowfullscreen></iframe>
<div>

CSS

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

.iframe-wrapper {
  padding-bottom: 56.25%;
  /* 9/16*100=56.25 アスペクト比は16:9 */
  height: 0;
  position: relative;
}

youtube以外にもiframeを使っている場合には、親要素にid指定をすると特定のiframeだけに適用されます。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

神社仏閣ホームーページ制作

ホームページ制作問合せ

口コミロボ