YouTubeの埋め込み動画をYouTube Player APIでコントロールしよう！

facebook
twitter

こんにちは、工藤です。
今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。
例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。

1 IFrame Player APIを読み込ませよう
2 youtubeにアップした動画を表示させる
3 ちなみに

IFrame Player APIを読み込ませよう

まずjsを読み込みます。

以下は直接htmlの方に記述できる方法

<script src="https://www.youtube.com/iframe_api"></script>

1	<script src="https://www.youtube.com/iframe_api"></script>

またはjsの方で読み込ませる方法もあります。

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

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";　// IFrame Player API を読み込む

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

お好みの方でどうぞ。

youtubeにアップした動画を表示させる

次にyoutubeの動画を表示させる領域をhtmlに記述します。
適当なIDを振っておいてください。

<div id="movieArea"></div>

1	<div id="movieArea"></div>

そしてカスタマイズ内容を記述します。
パラメータの指定内容についてはコメントを振ってある通りです。

var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('movieArea', { //ここに表示させる領域のIDを記述する
          height: '360', //動画の高さ指定
          width: '640', //動画の幅指定
          videoId: 'QulTvgUvuJ0', //youtubeにアップした動画のID指定
          events: {
            'onReady': onPlayerReady //プレイ準備完了時の動作
          },
          //ここからカスタマイズ
          playerVars: {
                    rel: 0, //最初の動画の再生が終了（または停止）したときに、プレーヤーに関連動画を表示するかどうか　0:表示しない 1:表示する　デフォルトは1   
                    playlist: '6Y3bRMwBCP4', //次に流すyoutubeにアップした動画のID指定
                    loop: 1, //ループをするかどうか　0:ループしない 1:ループをする　デフォルトは0         
                    controls: 1, //コントローラーを表示させるか　0:コントローラー無し 1:コントローラー有り　デフォルトは1
                    autoplay: 1, //オートで再生させるか　0:オートで再生させない　1：オートで再生する　デフォルトは0
                    showinfo: 0 //上部の動画タイトルを表示について　0：タイトルを表示させない　1：タイトルを表示させる　デフォルトは1
                }
        });
      }
//プレイ準備完了時の動作
      function onPlayerReady(event) {
        event.target.playVideo();　// 動画再生
        event.target.mute();　// ミュートにする
}

var player;

function onYouTubeIframeAPIReady() {

player = new YT.Player('movieArea', { //ここに表示させる領域のIDを記述する

height: '360', //動画の高さ指定

width: '640', //動画の幅指定

videoId: 'QulTvgUvuJ0', //youtubeにアップした動画のID指定

events: {

'onReady': onPlayerReady //プレイ準備完了時の動作

//ここからカスタマイズ

playerVars: {

rel: 0, //最初の動画の再生が終了（または停止）したときに、プレーヤーに関連動画を表示するかどうか　0:表示しない 1:表示する　デフォルトは1

playlist: '6Y3bRMwBCP4', //次に流すyoutubeにアップした動画のID指定

loop: 1, //ループをするかどうか　0:ループしない 1:ループをする　デフォルトは0

controls: 1, //コントローラーを表示させるか　0:コントローラー無し 1:コントローラー有り　デフォルトは1

autoplay: 1, //オートで再生させるか　0:オートで再生させない　1：オートで再生する　デフォルトは0

showinfo: 0 //上部の動画タイトルを表示について　0：タイトルを表示させない　1：タイトルを表示させる　デフォルトは1

}

});

}

//プレイ準備完了時の動作

function onPlayerReady(event) {

event.target.playVideo();　// 動画再生

event.target.mute();　// ミュートにする

}

DEMO

※動画はオートで再生されますが、音はミュートにしています。

style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">

今回は