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

2023-09-17 2024-03-19

ippon

「Youtubeで作成したPR動画をWordPressに挿入したい！」

そのような場合、Youtubeには「埋め込みURL」というものが存在します。

しかし、そのまま貼り付けると、サムネイルだけが表示され、自動再生していないことはないでしょうか？

Youtubeから埋め込みURLを準備する

まずは、Youtubeから対象の動画を開き、「共有」ボタンをおします。

すると、「埋め込み」ボタンがありますので、そこからURLをコピーしてください。

（以下リンク例）

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

自動再生の追加方法

次に、「src="https://www.youtube.com/embed/1ZEtDWyAAGA?" 」の後ろに要素を追加する必要があります。

・自動再生を有効にする

・音声をミュートにする

音声ミュートは必要に応じて追加しますが、Chromeのブラウザで表示される場合、音声をミュートにしなければ、自動再生されない場合があるため注意が必要です。

コピーしてきた上記のリンクの部分に以下を追加してください。

自動再生を有効にする

autoplay=1

音声をミュートにする

mute=1

挿入すると以下のようになります。

src="https://www.youtube.com/embed/1ZEtDWyAAGA?autoplay=1&mute=1"

動画を自動再生させつつ、繰り返し（ループ）再生する方法

自動再生はされるようになりましたが、動画によっては繰り返し再生させたい場合もあります。

その場合は、「動画を繰り返し再生させる」と「繰り返す動画のID」を追加しましょう。

動画を繰り返し再生させる

loop=1

繰り返す動画のID入力が必要

playlist=（再生したいYoutube動画ID）

IDは、https://www.youtube.com/embed/より後ろの部分となります。

https://www.youtube.com/embed/1ZEtDWyAAGA

挿入すると以下のようになります。

src="https://www.youtube.com/embed/1ZEtDWyAAGA?autoplay=1&loop=1&mute=1&playlist=1ZEtDWyAAGA"

注意点

このままだと、Youtube動画はレスポンシブ対応になっていない場合があります。

そのため、ウィジェットの位置など指定する場所によっては、指定方法が異なるため、今回は2種類の方法をご紹介します。

埋め込みHTMLで指定する場合

まず、HTMLで指定されているフレームサイズを修正します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/1ZEtDWyAAGA?si=FXyNZ9NvM61yad1E&autoplay=1&loop=1&mute=1&playlist=1ZEtDWyAAGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

そして、上記の部分の冒頭に記載のある、以下のサイズ部分を修正します。

<iframe width="560" height="315"

次に、最初はピクセルでのサイズ指定になっているため、widthの部分を100％のパーセンテージに変更します。

<iframe width="100％" height="315"

このように指定すると、横のサイズを自動的に調整してくれるため、ほぼこれで解決しますが、もし高さを微調整したい場合は、heightの部分をご希望のサイズに指定します。

CSSで指定する場合

その際は、「埋め込みURL」に<div class=”youtube-autoplay”> と </div>の要素で囲み、CSSを追加します。

（HTML例）

<div class=”youtube-autoplay”>
<iframe width="560" height="315" src="https://www.youtube.com/embed/1ZEtDWyAAGA?si=FXyNZ9NvM61yad1E&autoplay=1&loop=1&mute=1&playlist=1ZEtDWyAAGA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

（CSS例）

.youtube-autoplay{
position:relative;
width:100%;
padding-top:56.25%;
}
.youtube iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}