あなたのキモチ つなげるカタチ

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

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

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

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

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

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

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

実装所要時間は10分程度

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%;
  }
}

実装のポイント

現在制作中

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク