YouTubeの埋め込み動画を自動再生&ループ再生させる方法

今回はYouTubeの動画を<iframe>タグを使って埋め込み、そしてページを開いたときに自動でYouTube動画が再生される方法を紹介していきたいと思います。

サイトにYouTubeを埋め込む

まずはYouTubeのページを開きサイトに載せたい動画を選びます。

次に動画下の「共有」をクリックします。

モーダルウィンドウが出て「埋め込み」を押すとサイトに埋め込むための<iframe>のタグが表示されます。

<iframe>タグは下記のような形になっています。

〇〇〇〇は動画によって変わります。

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

動画を自動再生させる

動画を自動再生させるためにはパラメータに「autoplay=1」と「mute=1」を追加する必要があります。

autoplayは自動で再生させるパラメータでmuteは音をミュートさせるかしないかのパラメータになります。

src属性に指定しているURLにパラメータをつけてみましょう。

https://www.youtube.com/embed/〇〇〇〇?autoplay=1&mute=1

動画をループ再生させる

動画をループで再生させるには「loop=1と」「playlist=〇〇〇〇」を指定します。

「〇〇〇〇」に入る値はさきほどのURLに記載されているものを同じになります。

https://www.youtube.com/embed/〇〇〇〇?loop=1&playlist=〇〇〇〇

動画の自動再生&ループ再生させる場合

上記の自動再生とループ再生のときに指定したパラメータをつけることで自動再生とループ再生の両方ができるようになります。

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

コメント

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