CSS

YouTubeの埋め込み動画をレスポンシブ化する方法

ここでは、YouTube動画を埋め込んでスマホ対応させる方法についてお話します。

YouTube動画をページに埋め込む方法

動画を埋め込むこと自体はとても簡単にできますので、下記の手順の通りにやってみてください。

  1. 埋め込みたいYouTube動画のページを開く
  2. 動画にカーソルを合わせて右クリック
  3. 「埋め込みコードをコピー」というメニューを左クリック
  4. 動画を埋め込みたいページに貼付け(Crtl + V)

ただし、この方法だと動画がページからはみ出してしまったりします。動画サイズをブラウザに合わせて変化させる、いわゆるレスポンシブ対応にするためには少し工夫が必要になります。

埋め込み動画のスマホ対応化

動画の埋込みコードはこんな感じになっていると思います。

<iframe width="854" height="480" src="https://www.youtube.com/embed/UlAqutrCgX8" frameborder="0" allowfullscreen></iframe>

 

これはiframeタグと言われるものが使われています。Googleのマップの埋め込みでもiframeが使われています。スマホ対応させるには、はじめにコード全体をdivタグでくくってクラス名(ここでは「youtube」)を入れます。

<div class="youtube">
<iframe width="854" height="480" src="https://www.youtube.com/embed/UlAqutrCgX8" frameborder="0" allowfullscreen></iframe>
</div>

次にdivタグで指定したクラス名に下記のようなスタイルを適用させます。

.youtube { 
  position:relative;
  height:0;
  margin-top:20px;
  margin-bottom:20px;
  padding-bottom:56.25%;
  padding-top:30px;
  overflow:hidden;
}
.youtube iframe {
  position:absolute;
  top:0;
  right:0;
  width:100% !important;
  height:100% !important;
}

以上で、YouTube動画のレスポンシブ化は完了です。ここでは結論だけを簡単にお話しましたが、どうしてこの方法でスマホ対応できるのか仕組みをしたい方は下記もご覧ください。

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP