YouTubeのiframeAPIを何回か使う機会がありまして、需要がありそうと思った具体的なTIPSをまとめてみました。いまのところ2つだけです。
また使う機会があったり、これどうやるの？などコメントもらったら、随時更新していきます（たぶん）

何をするにもまずは

iframeAPIを読み込む

<script src="https://www.youtube.com/iframe_api"></script>

idを設定したhtmlタグを用意する

<div id="youtube"></div>

指定したidの場所にiframeを読み込む

let player;
window.onYouTubeIframeAPIReady = () => {
  player = new YT.Player("youtube", {
    height: "180",
    width: "320",
    videoId: "0ywdqfpQB-w",
  });
};

ひとまずこれで、初期の準備は完了です。YouTubeのiframeが埋め込まれます。
ここから急にごちゃごちゃとやり出しますのでご注意ください。

自分で用意した画像をYouTubeのiframe上に置いてクリックしたら再生する

「YouTubeのサムネイルではなく、自分で用意したサムネイルをiframeの上に置きたい」
何回かそういった実装をしたことがあるので、わりと需要がありそうです。
全てのソースコードはgithubに置いておいたので、そちらをご確認ください。

ソースコード

オンラインコードエディターだと再生系の操作が効かなかったり、コードも若干異なるのですが、デモも置いておきますね。
コード自体はgithubの方を参考にしてください。

デモ

では、解説していきます。

動作の流れ

YouTubeのiframeが読み込まれるまでローディングアイコンを表示
iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示
再生アイコンをクリックしたら、サムネイルごと非表示にし、YouTubeを再生する

こんな感じです。

iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示

iframeの読み込み状態に応じて関数の発動をコントロールするには、iframeAPIのイベント機能を使います。

// YouTubeのiframe初期読み込み
let player;
window.onYouTubeIframeAPIReady = () => {
  player = new YT.Player("youtube", {
    height: "180",
    width: "320",
    videoId: "0ywdqfpQB-w",
    events: {
      // 初期読み込み完了時に動く関数の指定
      onReady: onPlayerReady
    }
  });
};

// 初期読み込み完了時に動く関数
const onPlayerReady = () => {
  // loadingアイコンをフェードアウト
  $(".loading").fadeOut();
  // 再生アイコンをフェードイン
  $("#play").fadeIn();
};

再生アイコンをクリックしたら、サムネイルごと非表示にし、YouTubeを再生する

playVideo()というAPIの関数を使うと再生できます。

$("#play").on("click", () => {
  // thumbnailエリアをフェードアウト
  $(".thumbnail").fadeOut();
  // YouTubePlayerの再生
  player.playVideo();
});

スマホだと再生されない問題

スマホの場合、再生系の操作が（playVideo()など）が動いてくれません。
mute()で音量を消した状態であればAPIが動いてくれるようですが、根本的な解決にはなっていないですよね。。😢

同じiframeの中身の動画を切り替える

iframeの中身の動画を切り替えたいシーンありますよね。需要ありそう。
ソースコードとデモをおいておきます。（ソースコードはgithubの方を参考にしてください。）

ソースコード
 デモ

解説していきます。

動作の流れ

YouTubeのiframeが読み込まれるまでローディングアイコンを表示
iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示
再生アイコンをクリックしたら、サムネイルごと非表示にし、YouTubeを再生する
ボタンを押したらローディングアイコンを再表示し、iframeの動画を差し替え
動画の読み込みが完了したら、ローディングアイコンを非表示にして、再生アイコンを表示

ざっくりこんな感じです。
3までは、先ほどと同じですね。

ボタンを押したらローディングアイコンを再表示し、iframeの動画を差し替え

動画の差し替えにはcueVideoById()を使います。

// buttonクリック時
$(".youtube_button").on("click", e => {
  // 再生ボタンを非表示
  $("#play").hide();
  // サムネイルを表示
  $(".thumbnail").show();
  // loadingアイコンを表示
  $(".loading").show();
  // ボタンのactiveクラスを全て外す
  $(".youtube_button").removeClass("active");
  // クリックしたボタンにactiveクラスをつける
  e.target.classList.add("active");
  // iframeの動画を差し替える
  player.cueVideoById({
    // 差し替える動画のIDを指定
    videoId: `${e.target.id}`,
    // 動画の開始秒数を指定
    startSeconds: 0
  });
});

いったんこの段階で、再生ボタンを非表示にし、ローディングアイコンを表示させます。

動画の読み込みが完了したら、ローディングアイコンを非表示にして、再生アイコンを表示

動画の読み込み状態に応じて動く関数は、YouTubeAPIのイベントを利用します。
onStateChangeで関数を指定します。

let player;
window.onYouTubeIframeAPIReady = () => {
  player = new YT.Player("youtube", {
    height: "180",
    width: "320",
    videoId: "0ywdqfpQB-w",
    events: {
      // 初期読み込み完了時に動く関数の指定
      onReady: onPlayerReady,
      // 初期読み込み以降iframeの状態の変化に応じて動く関数の指定
      onStateChange: onPlayerStateChange
    }
  });
};

// iframeの状態の変化に応じて動く関数
const onPlayerStateChange = e => {
  // 動画の頭出し完了時
  if (e.data == 5) {
    // loadingアイコンをフェードアウト
    $(".loading").fadeOut();
    // 再生アイコンをフェードイン
    $("#play").fadeIn();
  }
};

e.data == 5は頭出しが完了したときにtrueを返します。
ステータスごとに番号が割り当てられていて、頭出し完了は「5」が割り当てられています。
その他にも「再生中」「停止中」などのステータスがありますが、詳しくは公式ドキュメントをご確認ください。

おわりに

iframeAPI、結構いろいろできそうな感じで便利です。
ぜひ使ってみてください〜

【随時更新】YouTube iframeAPIのTIPS（イベントなど）

何をするにもまずは

iframeAPIを読み込む

idを設定したhtmlタグを用意する

指定したidの場所にiframeを読み込む

自分で用意した画像をYouTubeのiframe上に置いてクリックしたら再生する

動作の流れ

iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示

再生アイコンをクリックしたら、サムネイルごと非表示にし、YouTubeを再生する

スマホだと再生されない問題

同じiframeの中身の動画を切り替える

動作の流れ

ボタンを押したらローディングアイコンを再表示し、iframeの動画を差し替え

動画の読み込みが完了したら、ローディングアイコンを非表示にして、再生アイコンを表示

おわりに