バスケ好きエンジニアのブログ

バスケの事はそんなに書いてません

YouTube ifame API の使い方

自分のサイトで YouTube のプレイヤーを表示しようとしたのだが、FlashAPI だと play とか stop とかのタイミングがタグが表示中じゃないと効かなかったりするので iframe API が便利という話。 iPhone でも表示できるしね!

MyApp = {};
function onYouTubeIframeAPIReady() {
    MyApp.YtPlayer = new YT.Player('videoDiv', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE'
    });
}

(function() {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})();

これで id=videoDiv の要素に iframe が埋め込まれて再生されたりする。

MyApp.YtPlayer.play(); 

とか

 MyApp.YtPlayer.stop();

とかやることによって再生と停止が切り替えられたりします!