YouTube埋め込みをCSSでレスポンシブ対応する方法【2025年最新版】

コーディング

【まずはコピペOK】YouTube埋め込みをCSSだけでレスポンシブ対応させる方法

「細かい説明はあとでいいから、とにかくすぐ使いたい！」という方は、以下のCSSをコピペして使ってください。
YouTube動画をアスペクト比16:9でレスポンシブ表示に対応できます。

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

このCSSを使えば、HTMLのiframeタグはそのままでOK。
余分な<div>で囲んだり、HTMLを編集する必要はありません。

こんなときに便利
  • WordPressのGutenbergでYouTubeブロックを使っているとき
  • HTML編集せずにCSSだけで対応したいとき
  • 複数の動画にまとめてスタイルを適用したいとき

基本の埋め込みコードとそのままだと困る理由

YouTube動画をWebサイトに埋め込むとき、多くの人が使うのが「共有」メニューからコピーできるiframeタグです。
例えば、以下のようなコードが公式から提供されています。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen></iframe>

一見これだけで簡単に動画を埋め込めそうですが、このままだとレスポンシブ非対応のため、画面サイズが変化するデバイス（特にスマートフォンやタブレット）では表示崩れが起こる原因になります。

スマホで動画がはみ出すことも

上記のiframeコードでは width="560" height="315" のようにサイズが固定されており、ページ幅に応じて自動的に縮小・拡大されるわけではありません。
PCでは横に余白ができる程度ですが、スマートフォンでは以下のような問題が発生します。

  • 動画が横にはみ出してレイアウトが崩れる
  • ページ幅に合わせて縮小されず、画面全体がスクロールされる
  • 高さも固定なので、縦長の空白ができる場合がある

このように、「iframeのまま」ではデバイス対応が不十分なため、CSSでレスポンシブ化の対応を行う必要があります。

特に複数動画を埋め込むと悪化する

トップページや記事中に複数のYouTube動画を並べた場合、固定サイズのままだと動画が画面外にはみ出したり、縦に間延びして見づらくなったりします。これにより、

  • ユーザビリティの低下
  • サイト離脱率の増加
  • SEO評価の悪化

といった悪影響につながる可能性もあります。
このような問題を避けるために、次章からはCSSを使ったYouTube埋め込み動画のレスポンシブ対応方法を詳しく紹介していきます。
ご希望があれば、この続きを「CSSのみで対応！aspect-ratioを使ったシンプルな方法」から執筆しますので、お申しつけください。

CSSのみで対応！aspect-ratioを使ったシンプルな方法

近年主流になっているのが、CSSの aspect-ratio プロパティを使ったレスポンシブ対応です。
この方法なら、iframeをラッパーで囲う必要がなく、CSSだけで完結します。

2025年現在、主要なモダンブラウザ（Chrome・Safari・Edge・Firefoxなど）では aspect-ratio がサポートされているため、安心して使用できます。

実装コード（HTMLはそのままでOK）

以下のCSSを、あなたのサイトのスタイルシートに追加するだけで、YouTube動画が画面サイズに合わせて自動で縮小・拡大されるようになります。

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

これで、以下のようなYouTube埋め込みコードにもそのまま適用されます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
コードのポイント
  • width: 100% … 親要素の幅に合わせて自動で拡大縮小されます。
  • aspect-ratio: 16 / 9 … 16:9の比率（YouTubeの標準的な横長動画）を維持。
  • height: auto … aspect-ratioを正しく効かせるために必要な指定。
  • display: block … iframeがインライン扱いにならないように明示的に指定。

縦型動画やショート動画にも対応できる？

はい、可能です。以下のように比率を変更すれば、縦長のYouTube Shorts（9:16）や、昔の4:3動画にも対応できます。

/* 縦型動画（9:16）にしたい場合 */
iframe[src*="youtube.com"] {
  aspect-ratio: 9 / 16;
}

/* 4:3の動画にしたい場合 */
iframe[src*="youtube.com"] {
  aspect-ratio: 4 / 3;
}

ただし、1ページに複数の比率の動画がある場合は、classやdata-属性で区別する必要があります。次の章で詳しく紹介します。

古いブラウザ対応｜padding-topハックの実装方法

aspect-ratio プロパティは非常に便利ですが、Internet Explorer（IE）などの旧ブラウザでは非対応です。
もしレガシー環境に対応したい場合は、従来から使われている「padding-top ハック」を使う方法が有効です。

実装コード

以下のように、iframeをdiv要素で囲み、CSSでパディングとポジション指定を行います。

<div class="youtube-wrap">
  <iframe src="https://www.youtube.com/embed/動画ID" 
    title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</div>
.youtube-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9（9 ÷ 16 = 0.5625） */
  height: 0;
  overflow: hidden;
}

.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

なぜpadding-topでアスペクト比を保てるの？

CSSのパディングは、縦方向でも親要素の「幅」に対してパーセンテージが適用される特性があります。
そのため、padding-top: 56.25% は「横幅に対して縦が56.25%」となり、16:9のアスペクト比を再現できます。

このテクニックを使うことで、aspect-ratioに対応していないブラウザでも正しく縦横比を保ったままレスポンシブ表示が可能になります。

実務での使用シーン
  • クライアントがIEを使って動作確認を行っている
  • 社内イントラネットなど古い環境に対応する必要がある
  • 安定動作が第一の公共系サイト・教育機関など

この方法はやや古典的ですが、知っておいて損はありません。
次の章では「Gutenbergブロックや自動埋め込み動画のレスポンシブ対応方法」を紹介します。

Gutenbergブロックや自動埋め込み動画のレスポンシブ対応方法

WordPressでは、記事作成時にYouTubeのURLをそのまま貼り付けるだけで、動画が自動的に埋め込まれます。特にGutenberg（ブロックエディタ）を使っている場合、iframeのラップ構造やクラス名が自動で生成されるため、従来のCSSが効かないケースがあります。

ここでは、Gutenbergの埋め込み動画にも対応できるCSSの書き方をご紹介します。

GutenbergのYouTubeブロックで生成される構造

例えば、WordPressのエディタで「YouTubeブロック」を追加した場合、以下のようなHTMLが自動的に出力されます。

<div class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube">
  <div class="wp-block-embed__wrapper">
    https://www.youtube.com/watch?v=動画ID
  </div>
</div>

このままでは、iframeではなくURLが書かれているように見えますが、実際にはJavaScriptによって <iframe> に変換されて表示されます。

Gutenbergブロック対応のCSS

以下のように、.wp-block-embed 以下にある iframe に対してスタイルを指定することで、GutenbergのYouTube埋め込みもレスポンシブ対応できます。

.wp-block-embed iframe,
.wp-block-embed__wrapper iframe,
iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
}

これで、

  • Gutenbergで追加したYouTubeブロック
  • YouTubeのURLをそのまま貼り付けた場合
  • 通常のiframe埋め込み（手書き）

のすべてに対して、同じCSSでレスポンシブ化が適用できます。

応用：縦型ショート動画（YouTube Shorts）の比率変更にも対応

もし、記事内で縦型動画（9:16）と横型動画（16:9）が混在する場合、親要素にクラスを追加して切り替えると便利です。

<div class="video-wrapper vertical">
  <iframe src="https://www.youtube.com/embed/動画ID" allowfullscreen></iframe>
</div>
.video-wrapper iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.video-wrapper.vertical iframe {
  aspect-ratio: 9 / 16;
}

verticalクラスを付けるだけで、縦型ショート動画にも対応できます。

Gutenbergは便利ですが、自動出力される構造が一貫していないため、セレクタの指定に柔軟性を持たせるのがポイントです。
次のセクションでは、SEOやパフォーマンスを考慮したiframe最適化のテクニックをご紹介します。

SEOやパフォーマンスを考慮したiframe最適化のテクニック

YouTube動画の埋め込みは便利ですが、そのままだとページの読み込み速度が遅くなったり、SEOに影響を与える可能性があります。
ここでは、パフォーマンス改善やSEO面で役立つiframeの最適化テクニックをご紹介します。

1.loading="lazy"で遅延読み込み

YouTubeのiframeはページを開いた瞬間から読み込みが始まるため、表示速度に大きく影響します。
これを防ぐには、iframeタグに loading="lazy" を追加しましょう。

<iframe src="https://www.youtube.com/embed/動画ID" loading="lazy" allowfullscreen></iframe>

これにより、画面内に表示されるまで読み込まれないため、初回表示の軽量化につながります。
WordPress6.3以降では自動で付加されることもありますが、テーマによっては明示的に指定が必要です。

2.youtube-nocookie.comを使ってプライバシー対応

通常の埋め込みURLではYouTubeがCookieを使用するため、CookieポリシーやGDPRに配慮したい場合は以下のように youtube-nocookie.com を使いましょう。

<iframe src="https://www.youtube-nocookie.com/embed/動画ID" loading="lazy" allowfullscreen></iframe>

これはYouTubeの公式仕様で、Cookieを使用せずに再生できます（ただし、一部の解析機能が制限される場合があります）。

3.title属性を追加してアクセシビリティ向上

YouTubeのiframeには title 属性を設定することで、スクリーンリーダーやSEOの観点からもベターになります。

<iframe src="https://www.youtube.com/embed/動画ID" title="動画のタイトル" loading="lazy" allowfullscreen></iframe>

特に企業サイトや公式ブログなどでは、HTMLのアクセシビリティを意識した対応が求められる場面も増えています。

まとめ：YouTube埋め込みは「そのまま貼る」は卒業しよう

YouTube動画の埋め込みは、ただ貼るだけでは以下のような問題が発生する可能性があります。

  • スマホでレイアウトが崩れる
  • 表示速度が遅くなりSEOに悪影響
  • プライバシー面でCookie使用が気になる

この記事では、こうした課題を解決するために以下の対策を紹介しました。

  • aspect-ratioでレスポンシブ対応
  • loading="lazy"で遅延読み込み
  • youtube-nocookie.comでプライバシー配慮
  • title属性でアクセシビリティ向上
  • さらに高度な最適化としてクリック再生型もあり

これらの対策はコピペで導入できるものが多く、初心者でも取り入れやすい内容です。
ほんのひと手間で、サイトの表示品質が大きく向上しますので、ぜひ実践してみてください。

この記事を書いた人
管理人
管理人

2012年にWebデザインの勉強を始め、2013年より制作会社に勤務。
これまでに500件以上のWebサイト制作・運用に携わってきました。
現在も制作会社に勤務しながら、Webデザインスクールのトレーナーとしても後進の育成に取り組んでいます。
WordPressやデザインの実践的なノウハウを、初心者にもわかりやすく発信できるよう試行錯誤しています。

管理人をフォローする
コーディング
シェアする
管理人をフォローする
管理人

コメント

タイトルとURLをコピーしました