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

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

条件

  • 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の自動再生を行うためには以下の2つのパラメータを追加する必要があります。

  • 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>

動画のループ

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

  • 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>

WordPressへの埋め込み

旧エディタの場合

ビジュアルタブを選択した状態で、挿入 > メディアを選択します。

メディアを挿入/編集画面で「埋め込む」タブを選択し、埋め込みコードを張り付けてOKボタンを押します。

ブロックエディタの場合

ブロックの追加で、埋め込み > 埋め込みを選択します。

埋め込みブロックの上部右メニューで、「HTMLとして編集」を選択します。

入力欄に埋め込みコードを張り付けます。

「想定されていないか無効なコンテンツがふくまれています。」という表示になるので、HTMLに変換を選択します。

以下のような表示になればOKです。

プレビュータブを選択すると、自動再生の様子を確認できます。

動画の埋め込み結果

実際に上記のコード(自動再生&無限ループ)を埋め込むと以下のような感じになります。

参考

YouTube:YouTube 埋め込みプレーヤーとプレーヤーのパラメータ

https://developers.google.com/youtube/player_parameters?hl=ja

stackoverflow:YouTube: How to present embed video with sound muted

https://stackoverflow.com/questions/35044594/youtube-how-to-present-embed-video-with-sound-muted

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です