WordPressにYouTubeを自動再生で埋め込む方法

確認飛行物体

5年前

WordPressにYouTubeを自動再生で埋め込む方法をご紹介します。

1 条件
2 動画の埋め込み
- 2.1 埋め込みリンクの取得
- 2.2 自動再生用の埋め込みコード
3 WordPressへの埋め込み
- 3.1 旧エディタの場合
- 3.2 ブロックエディタの場合
4 動画の埋め込み結果
5 参考
- 5.1 YouTube：YouTube 埋め込みプレーヤーとプレーヤーのパラメータ
- 5.2 stackoverflow：YouTube: How to present embed video with sound muted

条件

WordPress
Windows 10 64bit

動画の埋め込み

ここではサンプルとして以下のYouTube動画を用います。

JAXA－日本の宇宙開発史ハイライト－ | The History of Japanese Space Exploration

埋め込みリンクの取得

対象のYouTube動画を開いた状態で、動画画面を右クリック > 埋め込みコードをコピーを選択します。

クリップボードに以下のような埋め込みコードがコピーされるので、テキストエディタ等に一旦貼り付けます。

<iframe width="862" height="485" src="https://www.youtube.com/embed/EExJ1zcV_MA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

自動再生用の埋め込みコード

自動再生

YouTubeの自動再生を行うためには以下の２つのパラメータを追加する必要があります。

autoplay=1
- 自動再生を有効にします。
mute=1
- 音声をミュート（音声なし）にします。
- Chromeの場合、このパラメータを追加しないと自動再生しないようです。

パラメータは?を付けてsrcで指定するURLに追加します。
すなわち、以下のようになります。

<iframe width="862" height="485" src="https://www.youtube.com/embed/EExJ1zcV_MA?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

動画のループ

さらに、以下２つのパラメータを追加することで、動画を無限ループすることが出来ます。

loop=1
- 動画が繰り返し再生します。
playlist=ビデオID
- 再生する動画 ID をカンマ区切りのリスト形式で指定します。
- ビデオIDとは、YouTubeのURLのembed/の後に続く文字列です。https://www.youtube.com/embed/EExJ1zcV_MA
- ここでは「EExJ1zcV_MA」が対象のビデオIDです。

埋め込みコードは以下のようになります。

<iframe width="862" height="485" src="https://www.youtube.com/embed/EExJ1zcV_MA?autoplay=1&loop=1&mute=1&playlist=EExJ1zcV_MA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>