YouTube動画をWebページに埋め込む方法｜HTMLに貼り付けるだけで簡単に再生可能！

ブログやホームページを作っていると、

「YouTubeの動画を自分のサイトに載せたい」

「クリックしなくてもページ内でそのまま再生したい」

「リンクではなく、動画プレイヤー自体を表示したい」

と思うことはありませんか？

商品説明動画、チュートリアル、企業紹介動画など、YouTubeにアップした動画を自分のWebサイトで直接再生できると、訪問者の離脱を防ぎ、より効果的な情報発信ができます。

YouTubeの**埋め込み機能（iframe）**を使えば、プログラミング知識がなくても誰でも簡単に動画を自分のWebページに表示できます。

この記事では、

YouTube動画の埋め込みコードの取得方法
HTMLへの正しい貼り付け方
自動再生やサイズ調整のカスタマイズ
スマホ対応（レスポンシブ）にする方法
埋め込み時の注意点とトラブル解決

を、画像での手順説明とともに初心者にもわかりやすく解説します。

YouTube埋め込みの基本を理解しよう
1. 埋め込みとは何か
2. 埋め込み機能の仕組み
1. YouTube埋め込みコードの取得方法
2. HTMLページへの貼り付け方法
3. サイズとデザインをカスタマイズする
4. 埋め込みオプションとパラメータ
5. デザインとスタイリング
1. 動画周りのデザイン
2. 動画ギャラリーの作成
6. トラブルシューティングと注意点
7. 法的な注意点と制限
1. 著作権に関する注意
2. YouTube利用規約の遵守
まとめ：YouTube埋め込みでコンテンツを充実させよう

YouTube埋め込みの基本を理解しよう

埋め込みとは何か

**埋め込み（Embed）**とは、YouTubeの動画プレイヤーを自分のWebページ内に直接表示することです。

埋め込みのメリット：

訪問者がサイトを離れずに動画を視聴
ページの滞在時間が延びる
より一体感のあるコンテンツ体験
動画とテキストを組み合わせた説明が可能

通常のリンクとの違い：

リンク：クリックするとYouTubeサイトに移動
埋め込み：自分のサイト内で動画が再生される

埋め込み機能の仕組み

YouTube埋め込みはiframe（インラインフレーム）という技術を使用します。これにより、YouTubeのプレイヤーを自分のページに「窓」のように表示できます。

1. YouTube埋め込みコードの取得方法

ステップ①：YouTubeで動画を開く

手順：

YouTubeサイト（youtube.com）にアクセス
埋め込みたい動画を検索して開く
動画が正常に再生されることを確認

注意点：

限定公開や非公開動画は埋め込みできない
著作権で保護された動画は埋め込み制限がある場合

ステップ②：「共有」ボタンをクリック

場所： 動画下の操作ボタン群（?高評価、?低評価、?コメント）の右側にある**「共有」**ボタンをクリックします。

モバイル版YouTubeの場合： 動画下の「↗」のようなアイコンが共有ボタンです。

ステップ③：「埋め込む」を選択

手順：

共有メニューが表示される
SNSアイコンの下にある「埋め込む」をクリック
埋め込みコードが表示される

ステップ④：埋め込みコードをコピー

表示されるコード例：

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

コピー方法：

コード欄をクリックして全選択
「コピー」ボタンをクリック（または Ctrl+C / Cmd+C）

2. HTMLページへの貼り付け方法

基本的な貼り付け手順

説明： 取得したiframeコードを、HTMLの表示したい場所にそのまま貼り付けます。

HTML例：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動画埋め込みページ</title>
</head>
<body>
    <h1>おすすめ動画</h1>
    <p>こちらの動画をご覧ください。</p>
    
    <!-- YouTube動画埋め込み -->
    <div class="video-container">
        <iframe width="560" height="315" 
          src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          title="YouTube video player" 
          frameborder="0" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen>
        </iframe>
    </div>
    
    <p>動画の説明やコメントをここに書きます。</p>
</body>
</html>

WordPressでの埋め込み方法

クラシックエディタの場合：

投稿編集画面で「テキスト」タブに切り替え
埋め込みコードを貼り付け
「ビジュアル」タブで確認

ブロックエディタ（Gutenberg）の場合：

「+」ボタンで新ブロック追加
「YouTube」ブロックを選択
動画URLを入力（埋め込みコードは不要）

カスタムHTMLブロックを使用：

「+」ボタンから「カスタムHTML」ブロック追加
取得した埋め込みコードを貼り付け

その他のプラットフォーム

Wix：

「追加」→「動画」→「YouTube」
動画URLを入力

Squarespace：

「コンテンツブロック」→「動画」
YouTube URLを貼り付け

Shopify：

商品説明やページにHTMLとして追加
埋め込みコードを貼り付け

3. サイズとデザインをカスタマイズする

基本的なサイズ調整

説明： width（幅）とheight（高さ）の数値を変更することで、動画プレイヤーのサイズを調整できます。

サイズ調整例：

<!-- 小さめサイズ -->
<iframe width="400" height="225" src="..." ...></iframe>

<!-- 標準サイズ -->
<iframe width="560" height="315" src="..." ...></iframe>

<!-- 大きめサイズ -->
<iframe width="800" height="450" src="..." ...></iframe>

<!-- フルHDサイズ -->
<iframe width="1280" height="720" src="..." ...></iframe>

アスペクト比の計算： YouTubeの標準アスペクト比は16:9です。

幅560px → 高さ315px（560 ÷ 16 × 9 = 315）
幅800px → 高さ450px（800 ÷ 16 × 9 = 450）

レスポンシブ対応（スマホ対応）

説明： CSSを使って、画面サイズに応じて動画サイズが自動調整されるようにします。

基本的なレスポンシブCSS：

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
}

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

HTML：

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
      title="YouTube video player" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>
    </iframe>
</div>

モダンCSS（aspect-ratio）を使った方法

説明： 新しいCSSプロパティaspect-ratioを使うと、より簡単にレスポンシブ対応できます。

CSS：

.modern-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

HTML：

<iframe class="modern-video" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

ブラウザサポート：

Chrome 88+ ✅
Firefox 89+ ✅
Safari 15+ ✅
IE ❌（代替手法が必要）

4. 埋め込みオプションとパラメータ

自動再生（autoplay）

説明： ページ読み込み時に動画を自動で再生開始します。

設定方法：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1" ...></iframe>

重要な注意点：

音声ありの自動再生は多くのブラウザでブロックされる
ミュート状態でのみ自動再生が許可される
ユーザー体験を損なう可能性があるため慎重に使用

ミュート付き自動再生：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1" ...></iframe>

ループ再生

説明： 動画を繰り返し再生します。

設定方法：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?loop=1" ...></iframe>

開始・終了時間の指定

説明： 動画の特定の部分だけを再生したい場合に使用します。

開始時間指定：

<!-- 30秒から再生開始 -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=30" ...></iframe>

終了時間指定：

<!-- 2分（120秒）で再生終了 -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?end=120" ...></iframe>

開始・終了両方指定：

<!-- 30秒〜2分の部分のみ再生 -->
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?start=30&end=120" ...></iframe>

プレイヤーのコントロール

コントロールバーを非表示：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?controls=0" ...></iframe>

関連動画を非表示：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" ...></iframe>

YouTube情報を非表示：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?modestbranding=1" ...></iframe>

複数パラメータの組み合わせ

説明： 複数のオプションを組み合わせる場合は、&で繋げます。

組み合わせ例：

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&loop=1&controls=0&rel=0" ...></iframe>

5. デザインとスタイリング

動画周りのデザイン

基本的なスタイリング：

.video-wrapper {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.video-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.video-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  border-radius: 8px;
  overflow: hidden;
}

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

HTML：

<div class="video-wrapper">
    <h2 class="video-title">チュートリアル動画</h2>
    <p class="video-description">
        この動画では、基本的な操作方法について詳しく説明しています。
    </p>
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
          title="YouTube video player" 
          frameborder="0" 
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
          allowfullscreen>
        </iframe>
    </div>
</div>

動画ギャラリーの作成

CSS：

.video-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  padding: 20px;
}

.video-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.video-card h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #333;
}

.video-card .video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

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

HTML：

<div class="video-gallery">
    <div class="video-card">
        <h3>チュートリアル 1</h3>
        <div class="video-container">
            <iframe src="https://www.youtube.com/embed/動画ID1" ...></iframe>
        </div>
        <p>基本操作の説明動画です。</p>
    </div>
    
    <div class="video-card">
        <h3>チュートリアル 2</h3>
        <div class="video-container">
            <iframe src="https://www.youtube.com/embed/動画ID2" ...></iframe>
        </div>
        <p>応用操作の説明動画です。</p>
    </div>
    
    <div class="video-card">
        <h3>チュートリアル 3</h3>
        <div class="video-container">
            <iframe src="https://www.youtube.com/embed/動画ID3" ...></iframe>
        </div>
        <p>上級テクニックの説明動画です。</p>
    </div>
</div>

6. トラブルシューティングと注意点

よくある問題と解決方法

問題1：動画が表示されない

原因と解決策：

原因A：限定公開・非公開動画

解決策： 動画を「公開」または「限定公開」に設定

原因B：埋め込み無効設定

解決策： 動画の設定で「埋め込みを許可する」をオンにする

原因C：コードの記述ミス

<!-- ❌ 間違い：属性の書き方が不正 -->
<iframe src=https://www.youtube.com/embed/ID ...></iframe>

<!-- ✅ 正解：クォートで囲む -->
<iframe src="https://www.youtube.com/embed/ID" ...></iframe>

問題2：自動再生が動作しない

原因： ブラウザの自動再生ポリシー

解決策：

<!-- ミュート付き自動再生 -->
<iframe src="https://www.youtube.com/embed/ID?autoplay=1&mute=1" ...></iframe>

問題3：スマホで表示が崩れる

解決策：

/* レスポンシブ対応 */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

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

プライバシーとセキュリティ

プライバシー強化モード

説明： youtube-nocookie.comを使うと、視聴者のプライバシーを保護できます。

通常の埋め込み：

<iframe src="https://www.youtube.com/embed/ID" ...></iframe>

プライバシー強化版：

<iframe src="https://www.youtube-nocookie.com/embed/ID" ...></iframe>

効果：

動画を再生するまでクッキーが保存されない
ユーザーのプライバシー保護
GDPR対応の向上

パフォーマンスの最適化

遅延読み込み（Lazy Loading）

説明： ページの初期読み込み速度を向上させるため、動画を遅延読み込みします。

CSS：

.lazy-video {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-video.loaded {
  opacity: 1;
}

JavaScript：

// Intersection Observer を使った遅延読み込み
const videoContainers = document.querySelectorAll('.lazy-video');
const videoObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const iframe = entry.target.querySelector('iframe');
      iframe.src = iframe.dataset.src;
      entry.target.classList.add('loaded');
      videoObserver.unobserve(entry.target);
    }
  });
});

videoContainers.forEach(container => {
  videoObserver.observe(container);
});

HTML：

<div class="video-container lazy-video">
    <iframe data-src="https://www.youtube.com/embed/ID" 
      title="YouTube video player" 
      frameborder="0" 
      allowfullscreen>
    </iframe>
</div>

7. 法的な注意点と制限

著作権に関する注意

確認すべき点：

自分が投稿した動画のみ埋め込む
他人の動画を埋め込む場合は許可を得る
商用利用の場合は特に注意

YouTube利用規約の遵守

重要なポイント：

YouTube APIの利用規約に従う
埋め込み動画の改変は禁止
適切なアトリビューション表示

まとめ：YouTube埋め込みでコンテンツを充実させよう

YouTube動画の埋め込みは、Webサイトのコンテンツを大幅に充実させる効果的な方法です。

基本手順のおさらい

3ステップで簡単埋め込み：

YouTube動画ページで「共有」→「埋め込む」
表示されたiframeコードをコピー
HTMLの任意の場所に貼り付け

重要なポイント

レスポンシブ対応：

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

プライバシー配慮：

<iframe src="https://www.youtube-nocookie.com/embed/ID" ...></iframe>

パフォーマンス最適化：

必要に応じて遅延読み込み実装
自動再生は控えめに使用

効果的な活用法

コンテンツマーケティング：

商品説明動画の埋め込み
チュートリアル動画での操作説明
お客様の声や事例紹介

ユーザー体験向上：

サイト内での完結した情報提供
滞在時間の向上
より豊富なコンテンツ体験

YouTube埋め込みの基本を理解しよう

埋め込みとは何か

埋め込み機能の仕組み

1. YouTube埋め込みコードの取得方法

ステップ①：YouTubeで動画を開く

ステップ②：「共有」ボタンをクリック

ステップ③：「埋め込む」を選択

ステップ④：埋め込みコードをコピー

2. HTMLページへの貼り付け方法

基本的な貼り付け手順

WordPressでの埋め込み方法

その他のプラットフォーム

3. サイズとデザインをカスタマイズする

基本的なサイズ調整

レスポンシブ対応（スマホ対応）

モダンCSS（aspect-ratio）を使った方法

4. 埋め込みオプションとパラメータ

自動再生（autoplay）

ループ再生

開始・終了時間の指定

プレイヤーのコントロール

複数パラメータの組み合わせ

5. デザインとスタイリング

動画周りのデザイン

動画ギャラリーの作成

6. トラブルシューティングと注意点

よくある問題と解決方法

問題1：動画が表示されない

問題2：自動再生が動作しない

問題3：スマホで表示が崩れる

プライバシーとセキュリティ

プライバシー強化モード

パフォーマンスの最適化

遅延読み込み（Lazy Loading）

7. 法的な注意点と制限

著作権に関する注意

YouTube利用規約の遵守

まとめ：YouTube埋め込みでコンテンツを充実させよう

基本手順のおさらい

重要なポイント

効果的な活用法

Youtube

カテゴリー別人気記事

コメント