YouTubeのIFrame Player APIが使用できるか確認する

JavaScriptを使ってYouTubeの埋め込みを実装する機会があったのですが、IFrame Player APIのコード読み込まれているかどうかと、読み込まれていなさそうであればIFrame Player APIのコードを読み込むという処理を事前に行いたいということがあったので、実装方法をメモ。

対応前

まず対応前の状態ですが、IFrame Player APIを使ったYouTubeの埋め込みがサイト内の別部分で既に行われていました。

<header>
  <div id="header-movie"></div>
</header>

サイト内共通で使用しているcommon.jsで埋め込み処理が実装されています。

// YouTube 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);

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player('header-movie', {
    width: 640,
    height: 390,
    videoId: 'shXDiB3CZ60'
  });
}

このサイト内の特定のページにYouTubeの埋め込みを追加する(single.jsに追加)という実装だったのですが、IFrame Player APIの準備ができた際に実行されるonYouTubeIframeAPIReady() はcommon.jsで既に使われているので、追加すると前の関数が上書きされてしまいます。

function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player('single', {
    width: 640,
    height: 390,
    videoId: 'emflp3Ffpeg'
  });
}

common.jsのYouTube埋め込みが行われなくなりました。
対応前のデモページ

対応方法

対応方法として、IFrame Player APIのコードが読み込まれているかどうかを判別して、onYouTubeIframeAPIReady()を使わない形での埋め込みにしてみます。

yt_api_ready();

// IFrame Player APIの確認
function yt_api_ready() {
  // IFrame Player APIの準備ができたか確認
  if (typeof YT !== 'undefined' && typeof YT.Player === 'function') {
    // 準備ができている場合は埋め込み
    yt_embed();
  } else {
    // 準備ができていない場合は再度確認
    setTimeout(yt_api_ready, 100);
  }
}

// YouTubeの埋め込み
function yt_embed() {
  new YT.Player('single', {
    width: 640,
    height: 390,
    videoId: 'emflp3Ffpeg'
  });
}

これでcommon.jsの埋め込みを鵜川気しない形で実装できました。
対応後のデモページ

この実装でも基本的には問題ないのですが、例えば将来的にcommon.jsからYouTubeの埋め込みを削除するようなことがあった時、single.jsでも埋め込んでいることを見落としてIFrame Player APIの読み込みを削除してしまうようなことがある可能性があります。
そのため、IFrame Player APIが読み込まれていない場合に読み込みを追加する処理も追加してみます。

var apiCount = 0;
yt_api_ready();

// IFrame Player APIの確認
function yt_api_ready() {
  if(apiCount === 10) {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }
  // IFrame Player APIの使用準備ができたか確認
  if (typeof YT !== 'undefined' && typeof YT.Player === 'function') {
    // 準備ができている場合は埋め込み
    yt_embed();
  } else {
    apiCount++;
    // 準備ができていない場合は再度確認
    setTimeout(yt_api_ready, 100);
  }
}

// YouTubeの埋め込み
function yt_embed() {
  new YT.Player('single', {
    width: 640,
    height: 390,
    videoId: 'emflp3Ffpeg'
  });
}

IFrame Player APIが読み込まれているかの確認を一定回数行い、読み込まれていなさそうであれば読み込みを追加するように変更しました。
対応後のデモページ2