WordPressへのYouTube埋め込み完全ガイド！作業を効率化するプラグインなど徹底解説！

2025年8月17日

Webサイトに動画を埋め込んで魅力をアップしたいけれど、

「YouTube動画を貼り付けたはずなのに、なぜか表示されない！」
「複数の動画を並べたいけど、手作業だと面倒で時間がかかる……」
「プラグインを入れすぎると重くなるって本当？どれを選べばいいの？」
「スマホで見ると動画がはみ出してレイアウト崩れが起きる！」

など、WordPress初心者から上級者まで「どうすれば手軽かつ効率的に使えるの？」という悩みを抱えていませんか？

本記事では、YouTube埋め込みの基本から、作業を劇的に効率化するおすすめプラグインまでを徹底解説。

一つひとつの手順をスクリーンショット＆コード例付きで丁寧に紹介するので、初めての方でも安心です！✨

動画埋め込みの基本｜直接アップロード vs. YouTube埋め込み

動画ファイルを直接取り込む方法

動画ファイルをWordPressに直接アップロードして埋め込む手順とポイントを解説します。

メディアライブラリにアップロード
1. 投稿画面の「メディアを追加」→「ファイルをアップロード」
2. 対応形式（mp4, webm, ogg など）を選択
ブロックエディターで「動画」ブロックを挿入
- アップロード済みの動画を選択、またはドラッグ＆ドロップ
属性設定で表示サイズを調整
- 幅・高さを固定値で指定
- ✅ レスポンシブ対応 の場合は幅100%に設定

ポイント

対応形式

スクロールできます

フォーマット	長所	短所
MP4	ブラウザ互換性が高い 🎉	ファイルサイズが大きい ⚠️
WebM	高圧縮で軽量 ☁️	一部ブラウザで未対応の場合あり

サーバー負荷と容量管理
- 🔍 サーバー保存：ストレージを消費
- 💡 大容量はレンタルサーバーの制限に注意
- ⏳ 長い動画は読み込み時間が延びる

YouTubeリンクを活用するメリット・デメリット

YouTube埋め込みの基本と、導入前に押さえておきたいポイントをまとめます。

YouTube動画URLを貼り付け
- 動画ブロックにURLをペーストするだけで自動埋め込み
埋め込み用iframeコードを利用
- YouTube共有メニューの「埋め込む」からコード取得
- カスタムHTMLブロックに貼り付け

メリット

🌐 サーバー負担ゼロ：動画はYouTube側で配信
🚀 高速表示：CDN配信でスムーズ再生
🔄 自動アップデート：公開者が動画差し替えれば反映

デメリット

⚠️ 外部依存リスク：動画削除や非公開で表示されなくなる
📶 読み込み遅延：埋め込みスクリプトの影響でやや遅くなる場合あり
🛑 広告表示：YouTube側の広告が再生時に出る可能性

スクロールできます

	直接アップロード	YouTube埋め込み
サーバー負荷	高い（自己ホスト）	ほぼゼロ
表示スピード	サーバー性能依存	CDNで高速
管理の手軽さ	ファイル管理が必要	URL貼り付けのみ
カスタマイズ性	制限少なめ	iframeパラメータ依存

YouTubeを貼り付ける具体的ステップ

方法① URLのペーストだけでOK

投稿画面で「ブロックを追加」
「YouTube」ブロックを選択
動画ページのURLをコピー→ブロック内に貼り付け
自動プレビューが表示されたら完了 ✅

ポイント：最も手軽！Gutenberg（ブロックエディター）限定ですが、プラグイン不要でサクッと埋め込めます。

方法② 埋め込み用iframeコードを貼り付ける

YouTubeの動画下「共有」→「埋め込む」をクリック
表示されたiframeタグをコピー
投稿画面で「カスタムHTML」ブロックを追加
コピーしたコードをそのまま貼り付け
プレビューで表示を確認

メリット：細かいパラメータ（開始時間、自動再生など）をURLに直接追加可能 🎛️

方法③ ショートコードを使う

functions.phpや専用プラグインでショートコードを先に登録

   // 例：[youtube src="動画ID" start="30"]
   function my_youtube_shortcode($atts) {
     $a = shortcode_atts(['src'=>'', 'start'=>0], $atts);
     return '<iframe src="https://www.youtube.com/embed/'. esc_attr($a['src']) .'?start='. intval($a['start']) .'" frameborder="0" allowfullscreen></iframe>';
   }
   add_shortcode('youtube', 'my_youtube_shortcode');

投稿本文に [youtube src="動画ID" start="60"] のように記述
プレビューで動作チェック

メリット：何度も同じオプションを使うなら効率的。コードの使い回しがラク🎯

方法④ クラシックエディター（旧エディタ）での挿入法

投稿画面の「テキスト」タブを開く
iframeタグまたはショートコードを直接貼り付け
「ビジュアル」タブに切り替え、表示を確認
必要に応じて幅・高さを手動で調整

ポイント：Gutenbergに慣れない方や、プラグインで旧エディタを有効にしている場合に便利。

方法⑤ 再生リストを丸ごと埋め込む

YouTube上で再生リストページを開く
「共有」→「埋め込む」でiframeコード取得
カスタムHTMLブロックに貼り付け
iframe内のlist=パラメータでリストIDを指定
投稿でリスト全体をスライド形式で表示

メリット：複数動画をまとめて見せられるので、シリーズものや連続再生に最適📺

以上の5つの方法から、用途や慣れに合わせてベストな手段を選んでください！🎉

埋め込み後に試したいカスタマイズ機能

再生開始位置を指定する

YouTubeのURLやiframeにstartパラメータを追加すると、指定秒数から再生を開始できます。

<iframe
  src="https://www.youtube.com/embed/動画ID?start=30"
  frameborder="0"
  allowfullscreen>
</iframe>

ポイント：start=秒数 で再生位置を指定
⏱️ 視聴者にハイライト部分から見てもらいたいときに便利

ページ読み込み時に自動再生させる

autoplayパラメータを付与すると、ページ表示と同時に再生が始まります。

<iframe
  src="https://www.youtube.com/embed/動画ID?autoplay=1"
  frameborder="0"
  allow="autoplay"
  allowfullscreen>
</iframe>

注意：ブラウザにより自動再生がブロックされる場合あり
🔇 多くの場合、muted（ミュート）と組み合わせると動作しやすい

サイズやアスペクト比を調整する

埋め込み領域の幅・高さを変更して表示比率をコントロールしましょう。

<iframe
  width="640"
  height="360"
  src="https://www.youtube.com/embed/動画ID"
  frameborder="0"
  allowfullscreen>
</iframe>

または、CSSでレスポンシブ対応も可能です：

スクロールできます

方法	コード例
固定サイズ	`<iframe width="800" height="450" …></iframe>`
レスポンシブ	CSSで親要素に `position: relative; padding-bottom: 56.25%;` 等を設定

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比率 */
  height: 0;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

📱 モバイルでも美しく表示させたいときはレスポンシブ推奨

ループ再生やミュート再生の設定

ループ再生：loop=1&playlist=動画ID を併用
ミュート再生：mute=1 を指定

<iframe
  src="https://www.youtube.com/embed/動画ID?loop=1&playlist=動画ID&mute=1"
  frameborder="0"
  allow="autoplay; encrypted-media"
  allowfullscreen>
</iframe>

🔄 loop：繰り返し再生
🔇 mute：無音で自動再生

コントロールバーやYouTubeロゴの表示制御

controls=0：再生コントロール非表示
modestbranding=1：YouTubeロゴを最小限に

<iframe
  src="https://www.youtube.com/embed/動画ID?controls=0&modestbranding=1"
  frameborder="0"
  allowfullscreen>
</iframe>

🎚️ プレイヤーUIをシンプルに見せたいときに有効

プライバシー強化モード（cookie削減）を有効化

URLを youtube-nocookie.com ドメインに変更すると、初回再生までCookie発行を抑制できます。

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

🔒 GDPRやプライバシーポリシー対応におすすめ

これらのオプションを組み合わせることで、サイトのデザインやユーザー体験に最適化された動画埋め込みが実現します。

ぜひ試してみてください！✨

作業を効率化するプラグイン厳選4＋α

WP YouTube Lyte：軽量化＆遅延読み込み

WordPressに埋め込むYouTube動画を「ライトモード」で表示し、ページの読み込み速度を劇的に改善します。

遅延読み込み：ユーザーが動画をクリックするまで読み込みを保留
スマホ対応：モバイル表示でもスムーズ再生
設定不要の簡単導入：プラグイン有効化だけでOK ⚡️

Video Gallery – YouTube Gallery：レスポンシブなギャラリー作成

複数のYouTube動画をグリッド形式で一括表示できるプラグイン。

ドラッグ＆ドロップUI：動画リストの並べ替えが直感的
レスポンシブ設計：画面幅に応じて列数を自動調整
ライトボックス機能：ポップアップ再生でページ遷移なし

Embed Plus for YouTube：各種オプションをGUIで設定

豊富な埋め込み設定を管理画面のUIから細かくカスタマイズ可能。

自動再生 / ループ / ミュート などパラメータを簡単切替 🎛️
ビデオギャラリー機能：複数動画をタイル表示
アクセス制御：特定ユーザーのみ再生可にするオプション

ARVE（Advanced Responsive Video Embedder）：レスポンシブ対応とSEO強化

あらゆる動画ソースに対応し、SEOフレンドリーなマークアップで埋め込み。

schema.orgタグを自動追加し検索エンジン最適化
レスポンシブiframe：CSS不要で縦横比を維持
キャッシュ機能：読み込みスクリプトをローカル保存

Widget Responsive for YouTube：ウィジェット表示に最適

サイドバーやフッターなどウィジェットエリアに動画を手軽に設置できるプラグイン。

タイトル・サムネイル付きリスト：複数動画を縦並び表示
表示件数・順序設定：最新動画のみ抽出もOK
簡単ウィジェット操作：WordPress標準の操作感そのまま

プラグイン比較一覧

スクロールできます

プラグイン名	遅延読み込み	レスポンシブ	GUI設定	SEO対応	ギャラリー機能	ウィジェット対応
WP YouTube Lyte	◯	◯	×	×	×	×
Video Gallery – YouTube Gallery	×	◯	◯	×	◯	×
Embed Plus for YouTube	×	◯	◯	×	◯	×
ARVE（Advanced Responsive Video…）	◯	◯	×	◯	×	×
Widget Responsive for YouTube	×	◯	×	×	×	◯

✨ ポイント：用途やサイト構成に合わせて、速度重視ならWP YouTube Lyte、ギャラリー表示ならVideo GalleryやEmbed Plusを、SEO強化ならARVEを選ぶと効果的です。

埋め込み時の注意事項とベストプラクティス

著作権・肖像権の確認を徹底する

必ず権利を確認：他人の動画や映像素材には著作権・肖像権があります。
公式チャンネルから埋め込む：著作権侵害のリスクを避けるため、投稿者自身または公式がアップロードした動画を使いましょう。
違法アップロード動画は避ける：万が一動画が削除されると、埋め込みエリアは真っ白に…⚠️

ページの表示速度低下に注意する

遅延読み込み（Lazy Load）の活用：プラグインやコードで「動画ブロックが画面内に入ったときに読み込む」設定を入れると、初期表示が速くなります。
軽量表示モードを検討：WP YouTube Lyte や Embed Lite プラグインを使うと、埋め込み先のJavaScriptを軽量化できます。
テストを実施：PageSpeed Insights や GTmetrix などで、動画埋め込み前後のスコアを比較し、影響を把握しましょう📊

動画の数は適度に抑え、コンテンツとの関連性を重視する

埋め込み数は 1～3 本が目安：ページ内に大量の動画を入れると読み込み負荷だけでなく、ユーザーの回遊性も下がる可能性があります。
目的に合った動画を選ぶ：記事のテーマと密接に関連する動画だけを厳選し、「ついでに入れる」埋め込みは控えましょう。
配置場所を工夫：重要な情報の直後や、解説パートの合間など、読者が「ここで動画を見たい」と感じるタイミングに設置✨

動画内容をテキストで補足し、読者の理解をサポートする

キャプションを付ける：動画の要点やポイントを段落でまとめると、音声をオフにしたままでも理解しやすくなります。
見出しやリストで整理：動画前に「この動画で学べること」をリスト化し、視聴前の期待値を設定しましょう。
代替テキスト（アクセシビリティ）：iframeタグにtitle属性を入れ、スクリーンリーダー対応を強化します。

<iframe
  title="WordPressにYouTube動画を埋め込む方法の解説動画"
  src="https://www.youtube.com/embed/動画ID"
  frameborder="0"
  allowfullscreen>
</iframe>

まとめのチェックリスト

スクロールできます

注意点	推奨アクション
著作権・肖像権	公式チャンネル動画を使用✅
表示速度への影響	遅延読み込み＋軽量プラグインで最適化🚀
埋め込み本数	1〜3本に絞って関連性重視🎯
テキスト補足・アクセシビリティ	キャプション・代替テキストを必ず用意📋

これらを意識することで、ユーザー体験とサイトパフォーマンスを両立した動画埋め込みが実現します！

レスポンシブ対応とトラブルシューティング

スマホ／タブレットでもはみ出さない埋め込み方法

CSSでの縦横比維持テクニック

埋め込み動画を親要素で囲み、アスペクト比を維持します。下記は16:9例です。

<div class="video-responsive">
  <iframe
    src="https://www.youtube.com/embed/動画ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

.video-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9÷16＝0.5625 */
  height: 0;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ポイント：幅は100%固定、高さはpaddingに依存
📱 どんな画面サイズでも動画がはみ出さずぴったり収まる

divラッパー＆padding‑hack

padding-bottom の比率を変えれば、4:3や21:9など別比率にも対応可能。たとえば4:3ならpadding-bottom: 75%;を設定します。

.video-wrapper-4by3 {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  height: 0;
}
.video-wrapper-4by3 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

表示されないときのチェックリスト

スクロールできます

チェック項目	確認ポイント
URLの正確さ	コピーしたURLや動画IDに誤字・不要な文字が入っていないか確認 ✅
埋め込み許可設定	動画の「埋め込みを許可する」設定が無効化されていないかYouTube動画側でチェック ⚙️
キャッシュやテーマの影響	サイトキャッシュをクリアして再読み込み、または一時的に別テーマ／プラグインをオフにして動作確認 🔄