概要

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

要件

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

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

使用プラグイン

jquery
YouTube Player API
Magnific Popup

完成系

See the Pen 再生リストの埋め込みで最新のものが表示されるかテスト by ta-ke-no-bu (@ta-ke-no-bu) on CodePen.

動画追加されないと更新するかがわかりにくいけど。

実装

そもそもプレイリストの埋め込みってできるの？

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

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

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

<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）

listTypeとlistを設定

公式のパラメータの説明 listとlistTypeを参照

サンプル

<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>

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をぶちこむ。

動画が変わったらサイト上の表示用サムネイルも同時に最新のものにする。

プレイヤーの準備ができた時に再生リストの先頭のサムネイルを取得して表示しておく

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する。

公式リファレンス: 再生リスト情報の取得

サムネイル参考: [YouTube]YouTubeのサムネイル画像（default.jpg　mqdefault.jpg　hqdefault.jpg　sddefault.jpg　maxresdefault.jpg）

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

【Magnific Popup】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方

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


  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の設定をする。

公式リファレンス: 動画情報の取得

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

var  playerUrl = 'https://www.youtube.com/watch?v=' + ytPlayer.playerInfo.videoData.video_id;

ytPlayer.playerInfo.videoData.video_idで動画のidがとれるのでそれを使う。

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

おしまい。