【簡単解説】JavaScriptでYouTube動画を自動再生：iframe埋め込みのテクニック

2024-06-30

YouTube動画を自動再生でiframeに埋め込む方法（HTMLとJavaScript）

このチュートリアルでは、HTMLとJavaScriptを使用して、YouTube動画を自動再生でiframeに埋め込む方法を説明します。

必要なもの

YouTube動画のURL
テキストエディタ

手順

HTMLコードを作成する

以下のHTMLコードをテキストエディタで作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自動再生YouTube動画</title>
</head>
<body>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  <script>
    // YouTube iframe APIの読み込み
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // iframeがロードされたら、動画を再生
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        events: {
          'onReady': onPlayerReady
        }
      });
    }

    function onPlayerReady(event) {
      event.target.playVideo();
    }
  </script>
</body>
</html>

上記のコードで、以下の点を変更する必要があります。

幅と高さ: 動画の幅と高さを変更したい場合は、widthとheight属性の値を変更します。

HTMLファイルを保存する

上記コードを保存して、拡張子が.htmlのファイルにします。

HTMLファイルをブラウザで開く

保存したHTMLファイルをブラウザで開くと、自動再生でYouTube動画が埋め込まれていることを確認できます。

補足

上記のコードでは、動画をミュート状態で再生します。ミュートを解除するには、mute=1を削除します。 *ループ再生するには、loop=1を追加します。
コントロールバーを表示するには、controls=1を追加します。

注意事項

同じページ内で複数の動画を自動再生することはできません。
YouTubeの規約や仕様は変更される可能性があります。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自動再生YouTube動画</title>
</head>
<body>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  <script>
    // YouTube iframe APIの読み込み
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // iframeがロードされたら、動画を再生
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        events: {
          'onReady': onPlayerReady
        }
      });
    }

    function onPlayerReady(event) {
      event.target.playVideo();
    }
  </script>
</body>
</html>

説明

上記のコードは、VIDEO_IDを埋め込みたいYouTube動画のIDに置き換える必要があります。
コードの詳細については、上記の解説を参照してください。

JavaScriptコード

// YouTube iframe APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// iframeがロードされたら、動画を再生
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    events: {
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

上記のJavaScriptコードは、YouTube iframe APIをロードし、動画がロードされたら再生する処理を記述しています。

このサンプルコードをどのように使用するか

上記のサンプルコードをテキストエディタに貼り付けます。

上記の手順を実行すると、自動再生でYouTube動画がiframeに埋め込まれていることを確認できます。

YouTube動画を自動再生でiframeに埋め込む：その他の方法

iframeパラメータを使用する

最も簡単な方法は、iframeパラメータを使用して自動再生を有効にすることです。以下のコードのように、autoplayパラメータを1に設定します。

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

YouTube Data APIを使用して、動画情報を取得し、自動再生用の再生URLを生成する方法もあります。この方法は、より高度な制御が必要な場合に役立ちます。

サードパーティ製ライブラリを使用する

各方法の比較

方法	メリット	デメリット
iframeパラメータ	最も簡単	制御が限られている
YouTube Data API	より高度な制御が可能	複雑
サードパーティ製ライブラリ	追加機能やカスタマイズオプションを提供	セットアップが複雑

最適な方法は、ニーズとスキルレベルによって異なります。