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

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

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

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

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

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

PR

ChatGPT 120%活用術 [ ChatGPTビジネス研究会 ] 価格：1,390円（税込、送料無料) (2023/5/23時点) 楽天で購入

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。