今回は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=〇〇〇〇
コメント