【完全ガイド】WordPressにYouTubeを埋め込む方法|ミュート・自動再生・開始位置指定まで解説

WordPress

WordPressにYouTubeを埋め込むのはとても簡単で、記事や固定ページにURLを貼り付けるだけで動画が表示されます。
しかし「自動再生したい」「ミュートで再生したい」「特定の時間から再生したい」といった細かな調整をしたい場合は、iframeのパラメータ設定が必要です。

この記事でわかること
  • WordPressでYouTubeを埋め込む基本方法
  • ミュート・自動再生・ループ再生などのカスタマイズ
  • 表示速度や関連動画対策などの実装テクニック

この記事を読めば、目的に合わせてYouTube動画を自在に埋め込めるようになりますので、ぜひ参考にしてください。

WordPressにYouTubeを埋め込む基本方法

WordPressでYouTube動画を表示させる方法は、大きく分けて2つあります。

  1. ブロックエディタの「YouTube埋め込み」ブロックを使う方法
  2. 「カスタムHTML」ブロックでiframeコードを貼り付ける方法

それぞれ詳しく見ていきましょう。

1.埋め込みブロックを使う方法(簡単)

  1. 投稿編集画面で「+」ボタンを押し、「埋め込み」>「YouTube埋め込み」 を選択
  2. 埋め込みたい動画のURLを入力(例:https://www.youtube.com/watch?v=jNQXAC9IVRw
  3. 自動で動画が表示されるので、そのまま公開できます
1.埋め込みブロックを使う方法(簡単)

2.カスタムHTMLブロックでiframeコードを貼る方法(カスタマイズ可能)

  1. YouTube動画のページで「共有」>「埋め込む」を選択
  2. 表示されるiframeコードをコピー
  3. 投稿編集画面で「カスタムHTML」ブロックを追加
  4. コピーしたiframeコードを貼り付けて公開
<iframe width="560" height="315" src="https://www.youtube.com/embed/jNQXAC9IVRw?si=Ful8_T8-wwtxwKyx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

この方法を使うと、URLの後ろにパラメータを追加することで、ミュート再生や自動再生など自由に設定できます。

YouTube動画のページで「共有」>「埋め込む」を選択
表示されるiframeコードをコピー
投稿編集画面で「カスタムHTML」ブロックを追加

3.iframeの遅延読み込み(読み込み速度改善)

iframeタグに loading="lazy" を追加すると、ページの表示速度を落とさず動画を読み込めます。

<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/wa-wq8ygHt0" frameborder="0" allowfullscreen></iframe>

特に動画が複数ある場合や、ページのファーストビューに画像やテキストを優先表示させたい場合に有効です。
この基本方法を押さえておけば、次のステップでミュート再生や自動再生、開始時間の指定などのカスタマイズに進めます。

WordPressでYouTubeをミュート再生・自動再生する方法

YouTube動画を埋め込むだけでは、通常は手動再生で音も出ます。
しかし、自動再生させつつミュートにすることで、ページを開いた瞬間に動画を再生しつつ、ユーザーに音の不快感を与えずに視覚的な演出が可能です。

この設定は、カスタムHTMLブロックでiframeを使うのが基本です。

1.埋め込みコードをコピーする

  1. YouTube動画のページで「共有」>「埋め込む」を選択
  2. 表示されるiframeコードをコピーします

2.カスタムHTMLブロックに貼り付ける

WordPressの投稿・固定ページで

  1. 「+」をクリックして カスタムHTMLブロック を追加
  2. コピーしたiframeコードを貼り付けます

3.URLにパラメータを追加して自動再生・ミュート設定

iframeの src の末尾に以下のパラメータを追加します。

  • autoplay=1 → 自動再生
  • mute=1 → ミュート再生

複数指定する場合は & でつなぎます。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" 
frameborder="0" allowfullscreen></iframe>

これでページを開いた瞬間に、動画がミュートで自動再生されます。

4.追加で便利なパラメータ

必要に応じて以下も追加可能です:

パラメータ説明
controls=1再生ボタン・音量ボタンを表示(0で非表示)
loop=1ループ再生
playlist=VIDEO_IDループ再生時に必要(動画IDを指定)
modestbranding=1YouTubeロゴを最小化

例:ミュート自動再生+ループ+再生ボタン表示

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=1&modestbranding=1" 
frameborder="0" allowfullscreen></iframe>

ループ再生する場合は、必ず playlist に動画IDを指定する必要があります。

5.注意点

  • ブラウザによる制限:自動再生はPC・スマホのブラウザによって制限される場合があります。
  • 音が出ると自動再生できない:ほとんどのブラウザでは、音声ありの動画は自動再生をブロックするため、必ず mute=1 を指定しましょう。
  • SEO・読み込み速度loading="lazy" をiframeに追加すると、ページの表示速度が改善されます。
<iframe loading="lazy" width="560" height="315" 
src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" 
frameborder="0" allowfullscreen></iframe>

この手順を使えば、WordPressに埋め込んだYouTube動画をミュートで自動再生させ、ページ訪問者に自然な演出を提供できます。

YouTube動画を指定時間から自動再生する方法

WordPressに埋め込む際、動画の開始時間(start)や終了時間(end)を指定すると、特定の部分だけを再生させることができます。
自動再生・ミュート再生と組み合わせることも可能です。

1.基本のパラメータ

iframeの src に以下のパラメータを追加します。

  • start=秒数 → 再生開始時間(秒単位)
  • end=秒数 → 再生終了時間(秒単位)
  • autoplay=1 → 自動再生
  • mute=1 → ミュート再生

例:動画IDが VIDEO_ID、10秒から60秒まで再生する場合

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID?start=10&end=60&autoplay=1&mute=1"
frameborder="0" allowfullscreen></iframe>

秒数は動画の再生秒数で指定します。1分30秒なら start=90 のように指定。

2.複数パラメータを組み合わせる場合

パラメータは ? で最初を開始し、それ以降は & でつなぎます。
例:10秒から60秒まで再生、ミュート、ループ、再生ボタン表示

<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID?start=10&end=60&autoplay=1&mute=1&loop=1&playlist=VIDEO_ID&controls=1"
frameborder="0" allowfullscreen></iframe>
  • loop=1 を使う場合、必ず playlist=VIDEO_ID を追加
  • controls=1 で音量ボタンや再生ボタンを表示可能

3.WordPressでの貼り付け手順

  • 投稿・固定ページで カスタムHTMLブロック を追加
  • コピーしたiframeコードを貼り付け
  • VIDEO_ID を対象動画のIDに置き換え
  • パラメータを必要に応じて追加

4.注意点

  • 自動再生+音声ありの設定は、多くのブラウザでブロックされます → 必ず mute=1 を指定
  • 開始・終了時間は秒単位で正確に指定
  • loop=1 を使う場合は playlist の指定を忘れない

まとめ|WordPressのYouTube埋め込みはミュート+パラメータ活用がカギ

WordPressにYouTube動画を埋め込むときは、単純にURLを貼るだけでも再生可能ですが、より効果的に動画を見せるにはパラメータの活用がポイントです。

  • 自動再生(autoplay=1)ミュート(mute=1) を組み合わせる
    → ブラウザでの再生ブロックを回避し、ページ訪問時に自動で動画を流せる
  • 開始時間・終了時間の指定(start / end)
    → 見せたい部分だけ再生して、ユーザーの離脱を防ぐ
  • ループ再生(loop=1 + playlist=VIDEO_ID)や再生ボタン表示(controls=1)
    → 動画の体験をカスタマイズして、目的に応じた表示が可能

これらのパラメータを組み合わせて カスタムHTMLブロック に埋め込むだけで、WordPressでも簡単に自由度の高い動画埋め込みが実現できます。

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

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

管理人をフォローする
WordPress
管理人をフォローする

コメント

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