【jQuery】slickでYouTube動画を埋め込んだスライダーを実装する方法（iframeタグを使用）

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 slickでYouTube動画を埋め込んだスライダーを実装する方法の動画
5 CSS,JavaScriptの記述内容
6 実装のポイント

コーディングテクニックの実装内容

今回はWeb制作におけるYouTube Player APIとスライダー（slick）に関する内容です。slickでYouTube動画を埋め込んだスライダーを実装する方法をご紹介します。YouTube動画を再生中にスライドが切り替わるとに一時停止になるロジックを組み込んでいます。また、動画再生中はautoplayを止めています。
jQueryスライダープラグイン : 「slick」を使用

コーディングテクニックの使いどころ

スライダーの内にYouTube動画を埋め込みたい時に効果的です。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

>> DEMOはこちらから！（View Demo）

>> ページの読み込みが遅い場合はこちら

slickでYouTube動画を埋め込んだスライダーを実装する方法の動画

CSS,JavaScriptの記述内容

実装に必要なスクリプトとスタイルはこちらになります。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = {};
function onYouTubeIframeAPIReady() {
  $(".slick iframe").each(function(id) {
      var $iframe = $(this).get(0);
      if ($iframe) {
        players = new YT.Player($iframe, {
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
  });
}
function onPlayerReady() {
  $('.slick').slick('slickPlay');
}
function onPlayerStateChange(obj) {
  if (obj.data == 1) {
    $('.slick').slick('slickPause');
  } else if (obj.data == 2) {
    $('.slick').slick('slickPlay');
  }
}

$(function(){
  $(".slick").on("beforeChange", function(event, slick) {
    var currentSlide, player, command;
    currentSlide = $(slick.$slider).find(".slick-current");
    player = currentSlide.find("iframe").get(0);
    command = {
      "event": "command",
      "func": "pauseVideo"
    };
    if ( player != undefined ) {
      player.contentWindow.postMessage(JSON.stringify(command), "*");
    }
  });
  $(".slick").slick({
    autoplay: false,
    arrows: false,
    dots: true,
    pauseOnFocus: false,
    pauseOnHover: true,
    pauseOnDotsHover: false,
    fade: true
  });
});

.wrap {
  width: 640px;
  margin: 50px auto 0;
}

.slick li div {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.slick li div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:640px) {
  .wrap {
    width: 100%;
  }
}

実装のポイント

仕組みは少々複雑ですがスクリプトをコピペすればデモページと同じ動きを実装することは可能です。slickとYouTube動画の挙動は下記の通りとなります。

・オートスライド
・動画の自動再生はしない
・動画再生中はオートスライドを停止
・動画再生中にスライドをさせると動画は一時停止となりオートスライドも復活

スクリプトに何が書かれているのかを簡単に説明します。
今回はソースにiframeを埋め込んだ状態でYouTube Player APIを使用しています。.each()を利用してslick内のiframeに対してイベントを設定しておりonReady（プレーヤーの準備が整ったときに呼ばれます）onStateChange（プレーヤーの状態が変化したときに呼ばれます）のイベントをセットしています。

YouTube Playerプレーヤーの準備が整ったらslickが発火してスライドが始まりますが、YouTubeの再生を開始させるとslickPauseでslickをストップさせます。

また、動画再生中にスライドをさせた場合（slickのbeforeChange）はpauseVideoで動画を一時停止させています。

そして、onStateChangeの変化と連動してslickが発火し、オートスライドが再び始まります。

>> DEMOはこちらから！（View Demo）