建立 Youtube Iframe 影片

在網頁中直接貼上 Youtube iframe 連結，固然簡單方便快速，但如果想要進一步控制他的播放時點、效果等等，卻沒有相對應的 iframe 參數怎麼辦？

IFrame Player API

Youtube 有提供一個用 js 建立的 iframe API，運用他們提供的方式建立影片，可以使 Youtube 影片有更多的應用。

1.HTML

<div id="player"></div>  <!--  id 可自取  -->

建立影片後，影片的 iframe 會取代 這個 div

2.載入 IFrame Player 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);

3.建立影片

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: '影片ID',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

4.基本 function

// 當影片準備好就會執行此 function
function onPlayerReady(event) { 
    event.target.playVideo(); 
}

//當狀態改變會執行此 function
var done = false;
function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING && !done) {
        //stopVideo(); //立刻執行影片停止
        //setTimeout(stopVideo, 6000); //6秒執行影片停止
        //done = true;
    }
}

//影片停止 function
function stopVideo() { 
    players.stopVideo();
}

info如果要一次產生多個影片，可以利用 array 去存影片，然後在onYouTubeIframeAPIReady 這個時候去產生。