YouTube JavaScript Player API

○HTML

<div id="video_ID"></div>

 
○JS

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 ytplayer;
function onYouTubeIframeAPIReady() {
ytplayer = new YT.Player(‘video_ID’, {
height: ‘480’,
width: ‘360’,
videoId: ‘LbvUi8sD6XU’,
playerVars: { ‘rel’: 0, ‘wmode’:‘opaque’ },
events: {
‘onReady’: onPlayerReady,
‘onStateChange’: onPlayerStateChange
}
});
}
function onPlayerReady(event) {
// プレーヤー準備後
}
function onPlayerStateChange(event) {
var state = ytplayer.getPlayerState();
if(state == YT.PlayerState.ENDED) {
// 動画再生後
}
else if(state == YT.PlayerState.PLAYING) {
//再生したとき
}
else if(state == YT.PlayerState.PAUSED) {
//停止したとき
}
else if(state == YT.PlayerState.BUFFERING) {
//バッファリング始めたとき
}
else if(state == YT.PlayerState.CUED) {
//頭出ししたとき
}
}