YouTubeをJavaScriptで制御する(iframe 埋め込み式)


自作のスライダーに入れ込んだYouTube動画がクリックされたときに自動スライドを止めたい、ということがあったのでメモ。
まあ、最初から仕様が決まっていれば動画対応のスライダーを使うところですが。

がっつりYoutubeプレイヤーをJavascriptで作りたいんじゃなくて、
ちょっと止めたいだけだったんだけれど、公式読んでもすぐに分からなくて困ったのでメモ。

//youtube player
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '表示したい高さ',
    width: '幅',
    videoId: '表示したい動画のID',
    playerVars: {
        rel: "0"
    },
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}
var slide_stop = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    slide_stop = true;
  }
}

として、slide_stopをフラグにしてスライダーの動きを制御しました。

参照:
YouTube Player API Reference for iframe Embeds – YouTube — Google Developers
https://developers.google.com/youtube/iframe_api_reference?hl=ja

Google Japan Developer Relations Blog: iframe 埋め込み式 YouTube Player 向け JavaScript Player API のご紹介
http://googledevjp.blogspot.com/2011/01/iframe-youtube-player-javascript-player.html


この記事を書いた人