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

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

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

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

埋め込みたいYouTube動画のページを開く
動画にカーソルを合わせて右クリック
「埋め込みコードをコピー」というメニューを左クリック
動画を埋め込みたいページに貼付け（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動画のレスポンシブ化は完了です。ここでは結論だけを簡単にお話しましたが、どうしてこの方法でスマホ対応できるのか仕組みをしたい方は下記もご覧ください。

2017.10.22

アイフレームをスマホ対応させる方法

ここではiframeのレスポンシブ対応の方法についてお話していきます。iframeは、GoogleマップやYoutubeの埋め込み用のコードを使う場合でも対応が必要になります。レスポンシブは理解するのが難しい部分がありますが、とりあえずコードだけでもコピペして...

2018.08.27

YouTUBE動画を横並び２列に配置してスマホ対応させたい

ここでは、下記のような条件でページを構成したい場合の事例について見ていきます。 YouTubeを埋め込んでスマホ対応させたい。埋め込んだ動画をテキストや画像と横に並べて２列で配置したい。スマホ表示時は、動画やテキストを１列にしたい...

追記：Gutenberg（グーテンベルグ）の埋め込みYouTubeはこのスタイルシートでレスポンシブ化

最近は、グーテンベルグのYouTubeの埋め込みを使ってYouTubeを表示させる機会も多くなってきたと思います。その場合は下記のスタイルシートを「追加CSS」に追加していただければレスポンシブ化できます。

CSS

.wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  padding: calc(281 / 500 * 100%) 0 0;
} 
.wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

WordPressとデザインが学べるWebメディア