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

YouTubeのiframeAPIを何回か使う機会がありまして、需要がありそうと思った具体的なTIPSをまとめてみました。いまのところ2つだけです。
また使う機会があったり、これどうやるの？などコメントもらったら、随時更新していきます（たぶん）
# 何をするにもまずは
## iframeAPIを読み込む
```html
<script src="https://www.youtube.com/iframe_api"></script>
```
## idを設定したhtmlタグを用意する
```html
<div id="youtube"></div>
```
## 指定したidの場所にiframeを読み込む
```javascript
let player;
window.onYouTubeIframeAPIReady = () => {
  player = new YT.Player("youtube", {
    height: "180",
    width: "320",
    videoId: "0ywdqfpQB-w",
  });
};
```
ひとまずこれで、初期の準備は完了です。YouTubeのiframeが埋め込まれます。
ここから急にごちゃごちゃとやり出しますのでご注意ください。
# 自分で用意した画像をYouTubeのiframe上に置いてクリックしたら再生する
「YouTubeのサムネイルではなく、自分で用意したサムネイルをiframeの上に置きたい」
何回かそういった実装をしたことがあるので、わりと需要がありそうです。
全てのソースコードはgithubに置いておいたので、そちらをご確認ください。

[ソースコード](https://github.com/pecotech26/youtube_api/blob/master/original_thumbnail.html)

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

[デモ](https://jsfiddle.net/pecooh/5x6zhbpr/21/)

では、解説していきます。
## 動作の流れ
1. YouTubeのiframeが読み込まれるまでローディングアイコンを表示
2. iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示
3. 再生アイコンをクリックしたら、サムネイルごと非表示にし、YouTubeを再生する

こんな感じです。

## iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示
iframeの読み込み状態に応じて関数の発動をコントロールするには、iframeAPIのイベント機能を使います。

```javascript
// 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の関数を使うと再生できます。

```javascript
$("#play").on("click", () => {
  // thumbnailエリアをフェードアウト
  $(".thumbnail").fadeOut();
  // YouTubePlayerの再生
  player.playVideo();
});
```
### スマホだと再生されない問題
スマホの場合、再生系の操作が（`playVideo()`など）が動いてくれません。
`mute()`で音量を消した状態であればAPIが動いてくれるようですが、根本的な解決にはなっていないですよね。。😢
# 同じiframeの中身の動画を切り替える
iframeの中身の動画を切り替えたいシーンありますよね。需要ありそう。
ソースコードとデモをおいておきます。（ソースコードはgithubの方を参考にしてください。）

[ソースコード](https://github.com/pecotech26/youtube_api/blob/master/switch_movies.html)
[デモ](https://jsfiddle.net/pecooh/cysrz84u/6/)

解説していきます。
## 動作の流れ
1. YouTubeのiframeが読み込まれるまでローディングアイコンを表示
2. iframeが読み込まれたら、ローディングアイコンを非表示にして、再生アイコンを表示
3. 再生アイコンをクリックしたら、サムネイルごと非表示にし、YouTubeを再生する
4. ボタンを押したらローディングアイコンを再表示し、iframeの動画を差し替え
5. 動画の読み込みが完了したら、ローディングアイコンを非表示にして、再生アイコンを表示

ざっくりこんな感じです。
3までは、先ほどと同じですね。
## ボタンを押したらローディングアイコンを再表示し、iframeの動画を差し替え
動画の差し替えには`cueVideoById()`を使います。

```javascript
// 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`で関数を指定します。

```javascript
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」が割り当てられています。
その他にも「再生中」「停止中」などのステータスがありますが、詳しくは[公式ドキュメント](https://developers.google.com/youtube/iframe_api_reference#Events)をご確認ください。
## おわりに
iframeAPI、結構いろいろできそうな感じで便利です。
ぜひ使ってみてください〜