資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
previous arrowprevious arrow
next arrownext arrow

【2026年版】HTMLでYouTube動画を埋め込む方法｜iframeの貼り方・レスポンシブ対応・自動再生

プログラミング HTML

「YouTubeの動画をサイトに貼り付けたいけれど、スマホで見るとはみ出してしまう」「iframeをコピペしたのに表示されない」「autoplayが効かない」——Web制作を始めたばかりのころ、こうした悩みにぶつかった経験は誰にでもあるはずです。

YouTubeの埋め込みは仕組みを理解すれば決して難しくありません。HTMLのiframeタグを使う基本構文から、レスポンシブ対応・自動再生・遅延読み込みによる速度改善・プライバシー強化モードまで、この記事で一気にカバーします。

コピペで動くコード例を豊富に掲載しているので、初心者でもすぐに実装できます。2026年時点の最新仕様に対応した完全ガイドとして、ぜひブックマークしておいてください。

目次

YouTubeの埋め込みコードを取得する手順

共有ボタンから埋め込みコードをコピーする

まずはYouTubeが提供する埋め込みコードの取得手順を確認しましょう。手順はシンプルです。

  • 埋め込みたい動画のページを開く
  • 動画プレーヤー下の「共有」ボタンをクリック
  • ポップアップで「埋め込む」を選択
  • 表示されたiframeコードをコピー

コピーされるコードは次のような形式です。

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

VIDEO_ID の部分には各動画固有の11文字のIDが入ります。これをHTMLファイルに貼り付けるだけで動画を表示できます。ただしこのままではwidth/heightが固定ピクセルになるため、スマートフォンで見るとはみ出してしまいます。レスポンシブ対応については後のセクションで詳しく解説します。

iframeタグの各属性を理解する

YouTubeが生成するiframeには複数の属性が含まれています。それぞれの意味を把握しておくと、カスタマイズの際に迷いません。

  • width / height：iframeの表示サイズ（ピクセル指定）。レスポンシブ化するときはCSSで上書きする
  • src：動画のURL。https://www.youtube.com/embed/VIDEO_ID の形式
  • title：アクセシビリティ用のタイトル。スクリーンリーダーが読み上げる。省略しないこと
  • frameborder：iframeの枠線。現在はCSSで制御するため "0" が推奨。HTML5では非推奨属性だが後方互換として残っている
  • allow：iframeに許可する機能の一覧。autoplay・fullscreen などを列挙する
  • allowfullscreen：全画面表示を許可するブール属性

allow 属性に autoplay が含まれていないと、URLパラメータで自動再生を指定しても動作しません。後述の自動再生設定と合わせて確認してください。

基本の埋め込み方：HTMLに直書きする

最もシンプルな実装

HTMLファイルへの埋め込みは、取得したiframeコードをそのまま貼るだけです。以下はHTMLページへの基本的な実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YouTube埋め込みサンプル</title>
</head>
<body>

  <h1>動画サンプル</h1>

  <iframe width="560" height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="サンプル動画"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>

</body>
</html>

このコードで動画は表示されますが、幅が 560px 固定です。スマートフォンの画面幅より広くなるとはみ出すため、必ずレスポンシブ対応を行いましょう。

レスポンシブ対応：スマホでも崩れない埋め込み

YouTubeのiframeをレスポンシブにする方法は大きく2つあります。旧来のpadding-top方式と、新しいaspect-ratioプロパティです。ブラウザのサポート状況や保守運用の方針に合わせて選択してください。

方法①：padding-top 56.25% で16:9を維持する（旧来の方法・互換性重視）

16:9のアスペクト比を保ちながらレスポンシブにする古典的な手法です。親要素に padding-top: 56.25%（9÷16×100）を設定し、iframeをabsolute配置することで比率を保ちます。IE11を含む古いブラウザでも動作します。

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="サンプル動画"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>
.video-wrap {
  position: relative;
  width: 100%;
  max-width: 800px;   /* 最大幅を指定。お好みで変更 */
  margin: 0 auto;     /* 中央揃え */
  padding-top: 56.25%; /* 16:9 = 9/16 × 100 */
}

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

max-width を設定することで、広大なデスクトップ画面でも動画が巨大になりすぎるのを防げます。margin: 0 auto と組み合わせて中央寄せにするのが定番の運用です。

方法②：aspect-ratio: 16 / 9 を使う（モダンな方法・コードがシンプル）

CSS の aspect-ratio プロパティを使うと、コードが大幅にシンプルになります。2021年以降のモダンブラウザ（Chrome・Firefox・Safari・Edge最新版）では問題なく使えます。IE11は非対応のため、IE対応が必要なプロジェクトでは方法①を選んでください。

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="サンプル動画"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>
.video-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
}

position: relative / absolute が不要になり、CSSの見通しが格段に良くなります。新規プロジェクトでIEを切り捨てられる場合は、こちらを採用するのがおすすめです。

URLパラメータで動画の挙動をカスタマイズする

YouTubeのsrc URLにパラメータを追加すると、動画の再生挙動を細かく制御できます。パラメータは ? で始め、複数指定するときは & でつなぎます。

主要パラメータ一覧と使い方

  • autoplay=1：ページ読み込み時に自動再生する。ただしmute=1との併用が必須（ブラウザポリシーの制限）
  • mute=1：ミュート状態で再生。自動再生と組み合わせる
  • loop=1：動画をループ再生する。playlist=VIDEO_ID の同時指定が必要（後述）
  • start=秒数：指定した秒数から再生開始。例：start=30 で30秒から再生
  • controls=0：プレーヤーのコントロールバーを非表示にする
  • rel=0：再生終了後の関連動画を、同チャンネルの動画のみに限定する（完全に非表示にはできない）
  • modestbranding=1：コントロールバーのYouTubeロゴを最小化する（完全削除は不可）
  • cc_load_policy=1：字幕をデフォルトで表示する

autoplay（自動再生）の実装例

自動再生を有効にするには autoplay=1 と mute=1 の両方を指定し、allow 属性に autoplay が含まれていることを確認します。

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1"
    title="自動再生サンプル"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

URLの & はHTMLの属性値内では &amp; と書くのが正式ですが、現代のブラウザは & のままでも動作します。厳密なHTMLバリデーションが必要な場合は &amp; を使ってください。

loop（ループ再生）の実装例

ループ再生には loop=1 に加え、playlist=VIDEO_ID で同じ動画IDを指定する必要があります。これはYouTube APIの仕様上の制限です。

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?loop=1&playlist=VIDEO_ID&mute=1&autoplay=1"
  title="ループ再生サンプル"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

ヒーローセクションの背景動画として活用するケースが多いです。その場合は controls=0 も合わせて指定し、コントロールバーを非表示にすることが多いです。

start（開始時間）の実装例

動画の特定シーンから再生させたい場合は start パラメータを使います。

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?start=120"
  title="2分から再生するサンプル"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

YouTube共有URLの &t=2m0s 形式とは異なり、埋め込みURLでは秒数のみの整数で指定します（start=120 で2分）。

プレイリストの埋め込み

プレイリストURLの取得と埋め込み方

YouTubeのプレイリスト全体を埋め込むには、srcに videoseries を使います。プレイリストIDは YouTube のURL中の list= 以降の文字列です。

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
    title="プレイリストサンプル"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

プレイリストを埋め込むと、iframeの右上にプレイリストのパネルが表示され、ユーザーが次の動画を選択できます。最初の動画から順番に自動で流す場合は autoplay=1&mute=1 を追加します。

遅延読み込みとサムネイル置換によるページ速度改善

YouTubeのiframeは読み込みコストが高く、ページ内に複数埋め込むとCore Web Vitalsのスコア（特にLCP・TBT）が大幅に低下します。速度改善のテクニックを2つ紹介します。

loading=”lazy” 属性で遅延読み込み

iframeに loading="lazy" を追加するだけで、ビューポート外のiframeの読み込みを遅延できます。実装コストがほぼゼロの割に効果が大きいため、常に指定することを推奨します。

<div class="video-wrap">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="遅延読み込みサンプル"
    frameborder="0"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

サムネイル画像クリックで初めて読み込む「軽量化テク」

さらに踏み込んだ最適化として、初期表示はサムネイル画像のみを表示し、クリック時にはじめてiframeを生成する手法があります。「Lite YouTube Embed」と呼ばれる手法で、Googleのエンジニアが提唱しました。JavaScriptで実装します。

<!-- サムネイルをクリックで動画を読み込む軽量実装 -->
<div class="lite-youtube" data-videoid="VIDEO_ID" style="max-width:800px;margin:0 auto;">
  <img
    src="https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg"
    alt="動画のサムネイル"
    loading="lazy"
    width="480"
    height="360"
    style="width:100%;aspect-ratio:16/9;object-fit:cover;cursor:pointer;"
    onclick="this.parentElement.innerHTML='<iframe src=\'https://www.youtube.com/embed/VIDEO_ID?autoplay=1\' title=\'動画\' frameborder=\'0\' allow=\'autoplay;encrypted-media\' allowfullscreen style=\'width:100%;aspect-ratio:16/9;border:none;\'><\/iframe>'"
  >
</div>

サムネイル画像のURLは https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg で取得できます。高解像度版（maxresdefault.jpg）が存在する場合はそちらを使うと綺麗です。この手法はiframeを最初から読み込まないため、PageSpeed Insightsのスコアが劇的に向上します。本格的な実装には lite-youtube-embed（npmパッケージ）の利用も検討してください。

プライバシー強化モード（youtube-nocookie.com）

youtube-nocookie.com とは

YouTubeはプライバシーに配慮した埋め込みドメインとして www.youtube-nocookie.com を提供しています。このドメインを使うと、ユーザーが動画を再生するまでGoogleがクッキーを設定しないという仕様になります。GDPRや個人情報保護を重視するサイトで採用が増えています。

<div class="video-wrap">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
    title="プライバシー強化モードのサンプル"
    frameborder="0"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

通常の www.youtube.com と www.youtube-nocookie.com のドメイン部分を置き換えるだけで有効化できます。動画の機能・画質・表示には影響しません。欧州のユーザーを対象にしたサイトや、プライバシーポリシーを厳格に運用するコーポレートサイトでは積極的に採用を検討してください。

WordPressでのYouTube埋め込みとの違い

WordPressの自動埋め込み（oEmbed）

WordPressではYouTubeのURLを段落ブロックに貼り付けるだけで、自動的に動画が埋め込まれます。これはWordPressのoEmbed機能によるもので、内部的にiframeに変換されます。手軽なため、ブログ記事などでは最もよく使われる方法です。

Gutenbergの動画ブロックとiframeの違い

WordPressのブロックエディター（Gutenberg）には「YouTubeブロック」も用意されています。URLを入力するだけで埋め込めます。ただし、URLパラメータによるカスタマイズや細かいCSS制御が必要な場合は、カスタムHTMLブロックに直接iframeを書いた方が自由度が高いです。

  • 自動埋め込み / YouTubeブロック：手軽・URLを貼るだけ・パラメータ指定が難しい
  • カスタムHTMLブロックでiframe直書き：パラメータ・CSSが自由・設定の手間はかかる

SWELLなどのテーマには動画をラップするCSSが組み込まれていることがあります。既存のレスポンシブスタイルと競合しないよう、デベロッパーツールで適用中のCSSを確認してから実装してください。

よくあるトラブルと対処法

動画がはみ出す・横スクロールが発生する

iframeに width="560" などのピクセル値がそのまま残っていることが原因です。前述のCSSを適用してレスポンシブ化すれば解消します。また、親要素に overflow: hidden を設定していて位置がズレる場合は、ラッパーのpositionを確認してください。

動画が表示されない・真っ黒になる

考えられる原因は複数あります。

  • 動画が非公開または削除されている
  • 動画のオーナーが埋め込みを無効にしている（著作権保護などの設定）
  • VIDEO_IDが間違っている
  • Content Security Policy（CSP）でiframeのsrcが制限されている
  • ローカル環境（file://）で開いているためクロスオリジン制限が発生している

ブラウザのデベロッパーツール（F12）のコンソールタブでエラーメッセージを確認することで原因を特定できます。

iframeに余白が生まれる

iframeはインライン要素として扱われるため、下部に謎の余白が生まれることがあります。display: block を指定することで解消します。

iframe {
  display: block;
}

よくある質問（FAQ）

Q. YouTubeの動画を埋め込んでも著作権上の問題はないですか？

YouTubeが提供する埋め込み機能（iframe）を使う限り、動画のオーナーが埋め込みを許可している動画に関しては問題ありません。YouTubeの利用規約でも、埋め込み機能はサービスの一部として提供されており、第三者サイトへの埋め込みは許容されています。ただし、動画をダウンロードして自サーバーにアップロードする行為は著作権侵害となります。また、他者の著作権で保護されたコンテンツが含まれる動画の埋め込みは、元の動画のライセンス状況に依存します。商業目的の使用については、必要に応じて動画オーナーへの確認を行ってください。

Q. autoplay（自動再生）が効きません。なぜですか？

モダンブラウザはユーザー体験を守るため、音声付き動画の自動再生を原則としてブロックしています。自動再生を機能させるには autoplay=1 と mute=1 の両方を指定する必要があります。さらに、iframeの allow 属性に autoplay が含まれていることも確認してください。これらをすべて満たしても、ブラウザの設定によってはブロックされるケースもあります。ヒーロー背景動画などで確実に自動再生したい場合は、ミュートを前提とした設計にしてください。

Q. スマホでレスポンシブにするにはどうすればいいですか？

iframeにwidth/heightのピクセル値を直書きするのをやめ、CSSで制御するのが基本です。aspect-ratio: 16 / 9 と width: 100% を組み合わせた新しい方法がシンプルでおすすめです。古いブラウザとの互換性が必要な場合は、ラッパーに padding-top: 56.25% を設定してiframeをabsolute配置する方法を使ってください。どちらの方法も本記事のコード例をそのままコピーして使えます。

Q. ページが重くなるのを防ぐにはどうすればいいですか？

YouTubeのiframeは1本あたり多くのリソースを読み込むため、複数埋め込むとページが重くなります。有効な対策は2つです。まず loading="lazy" 属性を全iframeに追加し、画面外の動画を遅延読み込みにします。さらに効果的なのが、サムネイル画像を表示してクリック時にiframeを生成する「軽量化テク」です。これにより初期ページ読み込み時にYouTubeのリソースをまったく読み込まずに済み、PageSpeed InsightsやCore Web Vitalsのスコアが大幅に改善します。

Q. プライバシー強化モードとは何ですか？通常モードと何が違いますか？

www.youtube-nocookie.com ドメインを使った埋め込みがプライバシー強化モードです。通常の www.youtube.com では、ページを読み込んだ時点でGoogleのトラッキングクッキーが設定される場合があります。プライバシー強化モードではユーザーが実際に動画を再生するまでクッキーを設定しないため、GDPRなどのプライバシー規制への対応が容易になります。動画の表示品質や機能に違いはなく、ドメイン名を変えるだけで有効化できます。

まとめ

この記事では、HTMLでYouTube動画を埋め込む方法を基本から応用まで網羅的に解説しました。iframeのコードを取得してHTMLに貼る基本手順から、スマートフォンでも崩れないレスポンシブ対応、URLパラメータによる自動再生・ループ・開始時間の制御、ページ速度を守る遅延読み込みテク、プライバシー強化モードまで、実際のコードを使って説明しています。

各テクニックのポイントをまとめます。

  • iframeはYouTubeの共有ボタン→埋め込みから取得し、そのままHTMLに貼り付けるだけで動作する
  • レスポンシブ対応は aspect-ratio: 16 / 9（モダン）か padding-top: 56.25%（互換性重視）を使う
  • 自動再生は autoplay=1 と mute=1 の両方が必須。ミュートなしは現代のブラウザでは動作しない
  • ループ再生は loop=1&playlist=VIDEO_ID で同じIDを playlist にも指定する
  • loading="lazy" は全iframeに必ず追加してページ速度を守る
  • 複数埋め込む場合はサムネイル置換テクニックでCore Web Vitalsを守る
  • プライバシーに配慮したサイトは youtube-nocookie.com を採用する
  • WordPressではカスタムHTMLブロックを使うとiframeを直書きでき、パラメータも自由に設定できる

基本の1行から始めて、必要に応じてレスポンシブ・パラメータ・速度最適化を重ねていくのがスムーズな実装の進め方です。各コード例はそのままコピーペーストで動作するよう設計していますので、ぜひ実際のプロジェクトで活用してください。

関連記事

WithCodeを体験できる初級コース公開中！

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

  • 期間：1週間
  • 学習内容：
    ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
    → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！

公式サイトから無料カウンセリングに申し込む →
プログラミング HTML

この記事を書いた人

田中誠のアバター 田中誠

WithCodeでWeb制作を習得後、フリーランスエンジニアとして活動。HTML/CSS・JavaScript・WordPress案件を中心に年間20件以上の制作実績を持つ。「難しい技術をわかりやすく」をモットーに、初心者〜中級者向けの技術記事を執筆。副業・フリーランス独立を目指す方に向けた情報発信に注力している。

関連記事

  1. ホーム
  2. プログラミング
  3. HTML
  4. 【2026年版】HTMLでYouTube動画を埋め込む方法｜iframeの貼り方・レスポンシブ対応・自動再生

– service –WithGroupの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次