當你網頁內嵌了一個YouTube，通常的做法就是對那個影片點選分享 => 內嵌，就會跑出一條讓你複製貼上的iframe，像是:
|
1 |
<iframe src="https://www.youtube.com/embed/PEr5agHOTcg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> |
但是假設你希望有人點選撥放這部內嵌影片時，網頁可以做點什麼，像是紀錄點擊，或是CSS在播放的時候有些變換，那該怎麼辦呢?
YouTube其實有提供一個很好用的工具，叫做IFrame Player API，可以利用這東西來做一些簡單的觸發或是監聽，下面我寫一支簡單的程式範例:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <!-- 這個DIV是用來顯示iframe的 --> <div id="ytplayer"></div> </body> <script src="https://www.youtube.com/iframe_api"></script> <script> var player; function onYouTubeIframeAPIReady() { player = new YT.Player('ytplayer', { videoId: 'PEr5agHOTcg', //你的Youtube 影片ID events: { 'onStateChange': function(event) { if (event.data == YT.PlayerState.PLAYING) { alert('hello!'); //這邊是當開始播放後，需要做的動作 } } } }); } </script> |
顯示的效果如下:
其他的用法可以到https://developers.google.com/youtube/iframe_api_reference查詢
hello!!!!
world!