サイト上の埋め込みyoutubeをPlaylistを使って自動更新

# 概要
クライアントから「youtubeに週1で動画アップしていくから最新のものを自動的にwebサイトに反映させて！」という依頼があったときの対応。

# 要件
主にデザイナーさんからの要望

- iframeで埋め込むとデフォルトのプレイヤーとか見えちゃうから最新動画のサムネイルで隠して！ボタンとかオリジナルのやつ使っておしゃれにしたい。
- サイトでMagnific Popupというプラグインを使用してるからそれを使ってポップアップしてから再生させたい

## 使用プラグイン
  - jquery
  - YouTube Player API
  - Magnific Popup

# 完成系

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="vYNMXBj" data-user="ta-ke-no-bu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/ta-ke-no-bu/pen/vYNMXBj">
  再生リストの埋め込みで最新のものが表示されるかテスト</a> by ta-ke-no-bu (<a href="https://codepen.io/ta-ke-no-bu">@ta-ke-no-bu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
動画追加されないと更新するかがわかりにくいけど。

# 実装
## そもそもプレイリストの埋め込みってできるの？
iframeでやる場合はプレイリスト一覧で「再生リストの全体を見る」の「共有」から埋め込みリンクの生成が可能

※ただし、再生リストの設定が「埋め込みを許可」されていることと公開されていることが前提。

プレイリストIDがわかってるなら下記で埋め込み。

```html
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=プレイリストのID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
## プレイリストを取得（最新のものが一番になる設定）
「再生リストのトップに新しい動画を追加」にもチェックが必要

## YouTube Player APIで動画を入れてみる
iframeでの埋め込みができるのはわかったのでAPIでいれてみる

昔書いた記事 : [動画をwebに実装するときのメモ（video, youtube API, vimeo API）](https://qiita.com/ta-ke-no-bu/items/6a21d2074db46266bd40)
## listTypeとlistを設定
[公式のパラメータの説明 listとlistTypeを参照](https://developers.google.com/youtube/player_parameters?hl=ja#list)

サンプル

```html
<div class="weekly">
  <div class="movie">
    <div class="play_wrap"></div>
    <div class="iframe_wrap">
      <button title="Close (Esc)" type="button" class="js-movieClose">×</button>
      <div id="player"></div>
    </div>
  </div>
  <div class="js-overlay"></div>
</div>
```

```javascript
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player('player', {
    height: 390,
    width: 640,
    playerVars: {
      playsinline: 1,
      rel      : 0,
      showinfo:0,
      iv_load_policy: 3,
      controls: 0,
      list: 'プレイリストのID',//再生リストのID
      listType: 'playlist' //再生リストタイプ指定
    },    
    events: {
      'onReady': onPlayerReady
    }
  });
}

```

id=playerにiframeをぶちこむ。

## 動画が変わったらサイト上の表示用サムネイルも同時に最新のものにする。
プレイヤーの準備ができた時に再生リストの先頭のサムネイルを取得して表示しておく


```javascript
function onPlayerReady(e) {
  // 再生リストの先頭のサムネイルを取得して表示しておく

  const playListGet = e.target.getPlaylist();//再生リスト情報の取得

  $(".play_wrap").append(
    '<img class="thumb" src="https://img.youtube.com/vi/' + playListGet[0] + '/sddefault.jpg">' +
    '<a href="javascript:void(0);" class="wmovie-play"><i class="fab fa-youtube"></i></a>'
  );
}
```
サムネイル情報を取得して、.play_wrapにサムネイルと再生ボタンをappendする。

公式リファレンス: [再生リスト情報の取得](https://developers.google.com/youtube/iframe_api_reference?hl=ja#Retrieving_playlist_information)

サムネイル参考: [[YouTube]YouTubeのサムネイル画像（default.jpg　mqdefault.jpg　hqdefault.jpg　sddefault.jpg　maxresdefault.jpg）](https://force4u.cocolog-nifty.com/skywalker/2013/08/youtubeyoutubed.html)


## magnificPopupで使えるようにurlを付与する

[【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方](https://uhaha.net/magnific-popup/#nav05)

aタグにurlを渡すだけでいいみたい。簡単！


```javascript

  const playerUrl = e.target.getVideoUrl();//再生リストのurl
  $(".wmovie-play").attr("href", playerUrl);
 
  /**
  * MOVIEポップアップ設定
  */
  $(".wmovie-play").magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 200,
    preloader: false,
    fixedContentPos: false
  });
```

さっきappendした.wmovie-playにプレイヤーのurlを取得して渡し、magnificPopupの設定をする。

公式リファレンス: [動画情報の取得](https://developers.google.com/youtube/iframe_api_reference?hl=ja#Retrieving_video_information)

プレイリストのurlを取得するのって、プレイリストのurlじゃなくて最新の動画のurlがいいのかと思ってたけどプレイリストのurlでも動いた。
ちなみに最新動画のurl取得は

```javascript
var  playerUrl = 'https://www.youtube.com/watch?v=' + ytPlayer.playerInfo.videoData.video_id;
```
ytPlayer.playerInfo.videoData.video_idで動画のidがとれるのでそれを使う。

あとは、クライアントにプレイリストを作ってもらい、そこに動画を入れてもらえば勝手にサイト埋め込まれてる動画もサムネも最新のものに変わってくれる。

おしまい。