Youtube埋め込み動画を自動再生・消音・ループ再生する方法

Programming

この記事ではWEBサイト上にYouTube動画を埋め込んだ際に自動再生、消音、ループ再生を可能にする方法を紹介します。
埋め込みコードを少しだけいじるだけで可能なので簡単に今すぐ可能です。

YouTubeを埋め込む方法そのものに関しては以下の記事を参照下さい。

Youtube埋め込み動画を自動再生する方法

YouTubeの動画を自動再生させるには以下のパラメーターをURLに追加します。

パラメーター動作
autoplay=1自動再生

以下のYouTube埋め込みコードの「src=”https://www.youtube.com/embed/動画ID”」の部分にパラメーターを追加します。

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

パラメータを追加する時は「Ub9CFcjyoWk」の最後尾に「?」を付けてから追記します。
*「Ub9CFcjyoWk」はYouTubeの動画IDです。

実際に埋め込むコードに「autoplay=1」のパラメータを付けると以下の様になります。

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

Youtube埋め込み動画を消音にする方法

YouTubeの動画を消音にするには以下のパラメーターをURLに追加します。

パラメーター動作
mute=1消音

先ほど自動再生のパラメーターを追加した埋め込みコードを使用して説明します。
パラメーターを追加する場所は同じ場所だが、パラメータを複数付ける場合は「?」では無く、2個目以降は以下の様に「&」で繋げていきます。

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

Youtube埋め込み動画をループ再生する方法

YouTubeの動画をループ再生するには以下のパラメーターをURLに追加します。

パラメーター動作
loop=1ループ
playlist=動画IDプレイリスト

先ほど自動再生と消音のパラメーターを追加した埋め込みコードを使用して説明します。
消音の時と同じ様に「&」で繋げてパラメーターを追加しますが、ループ再生をする場合は上記二つのパラメータを必ず付ける必要があります。

playlist=動画IDのIDは、埋め込みコード上にある動画IDを入れます。なので今回の場合は「playlist=Ub9CFcjyoWk」になります。

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

ここまでのパラメータを全て入れるとYoutube埋め込み動画を自動再生、消音、ループ再生にする事が出来ます。


以上が「Youtube埋め込み動画を自動再生・消音・ループ再生する方法」でした。

最後にこの方法で上手くいかない場合は恐らく動画の読み込みを後回しにしている、lazy load系のプラグインや処理が邪魔しているのだと思います。
検証はしていませんが、lazy load系を削除したら出来るかもしれません。ただそこまでしてやる必要性は低いと思います。
(他にも原因はあると思いますが。。。)

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

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