LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@ksnk(kusunoki)

Slick×YoutubeAPIを実装する

Last updated at Posted at 2020-07-31

slickスライダー×Youtube埋め込みでハマったので備忘録として残します。

ハマったポイント

動画部分でslickのスワイプが効かない。

解決策

色々と探しましたが、空divを被せる方法しかなさそうだったので、タップイベントを取得する以下方法を参考にカスタムしました。
slick.jsとYoutube APIを使って動画スライダーを実装する

最終完成形

PCでは並べて表示、スマホではslickを有効にして動画をひとつずつスライドさせる。
埋め込み動画はインライン再生とし、コントローラーを表示・操作できるようにする。
オリジナル再生ボタン・サムネイルを設定する。

Slick×YoutubeAPIを実装する

よく見ているチャンネルのお気に入り動画を埋め込みました。

サンプルコード

HTML
<div class="l-movie">
  <ul class="list" id="js-slick">
    <li class="list__item">
      <div class="list__ytwrap">
        <div class="list__yt" videoid="3qcNqfxIRdY"></div>
        <div class="list__thumb"><img src="https://placehold.jp/160/000000/555555/600x340.png?text=01" alt=""></div>
      </div>
    </li>
    <li class="list__item">
      <div class="list__ytwrap">
        <div class="list__yt" videoid="FKbQaUeN7FM"></div>
        <div class="list__thumb"><img src="https://placehold.jp/160/000000/555555/600x340.png?text=02" alt=""></div>
      </div>
    </li>
    <li class="list__item">
      <div class="list__ytwrap">
        <div class="list__yt" videoid="GTYJ3ECLNrw"></div>
        <div class="list__thumb"><img src="https://placehold.jp/160/000000/555555/600x340.png?text=03" alt=""></div>
      </div>
    </li>
    <li class="list__item">
      <div class="list__ytwrap">
        <div class="list__yt" videoid="g6xDB-22WzE"></div>
        <div class="list__thumb"><img src="https://placehold.jp/160/000000/555555/600x340.png?text=04" alt=""></div>
      </div>
    </li>
  </ul>
</div>
SASS
.l-movie{
  width: 100%;
  position: relative;
  margin-bottom: 50px;
  .list{
    width: 90vw;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    @media screen and (max-width: 750px) {
      width: 100%;
      display: inline-block;
    }
    &__item{
      width: 48%;
      margin-bottom: 40px;
      margin-right: 4%;
      position: relative;
      &:nth-of-type(2n){
        margin-right: 0;
      }
      &:last-of-type{
        margin-right: 0;
      }
      @media screen and (max-width: 750px) {
        width: 100%;
        margin-bottom: 0;
        margin-right: 0;
      }
    }
    &__ytwrap{
      position: relative;
      width: 100%;
      padding-bottom: 56.5%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
    }
    &__yt{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      @media screen and (max-width: 750px) {
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
    &__thumb{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      cursor: pointer;
      width: 100%;
      height: 100%;
      > img{
        width: 100%;
        height: auto;
      }
      &::before, &::after{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s easeInSine;
        z-index: 2;
      }
      &::after{
        content: "";
        width: 72px;
        height: 72px;
        border: 2px solid #fff;
        border-radius: 50%;
      }
      &::before{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 9px 0 9px 14px;
        border-color: transparent transparent transparent #fff;
        z-index: 3;
      }
      @media screen and (min-width: 750px) {
        &:hover{
          &::after{
            background-color: #fff;
          }
          &::before{
            border-color: transparent transparent transparent #000;
          }
        }
      }
    }
    &__mask{
      @media screen and (max-width: 750px) {
        width: 100%;
        height: 70%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
      }
    }
  }
}
JS
/*  YouTube  */
var ytPlayers = [];
var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
  if ($(window).width() < 750) {
    $('.list__ytwrap').append('<div class="list__mask"></div>');
  }
  $('.list__yt').each(function(i,elem){
    embedYoutube(i,elem);
  });
}
function embedYoutube(i,elem){
  var videoId = $(elem).attr('videoid');
  var playerId = videoId + '_' + i;
  $(elem).attr('id', playerId);
  ytPlayers[playerId] = ytInit(playerId, videoId);
  hammerInit(playerId);
}
function ytInit(playerId, videoId){
  var ytPlayer = new YT.Player(
    playerId,
    {
      videoId: videoId,
      playerVars: {
        enablejsapi: 1,
        rel:0,
        controls: 1,
        playsinline: 1,
        fs: 1,
        wmode: 'transparent',
        origin: location.protocol + '//' + location.hostname + "/"
      },
      events: {
        onReady: onPlayerReady,
        onError: onPlayerError
      }
    }
  );
  return ytPlayer;
}
function hammerInit(playerId){
  if ($(window).width() < 750) {
    var hammerObj = new Hammer($('#' + playerId + ' ~ .list__mask' ).get(0));
  }else{
    var hammerObj = new Hammer($('#' + playerId + ' ~ .list__thumb').get(0));
  }
  hammerObj.on('tap click', function(event){
    console.log(ytPlayers[playerId].getPlayerState())
    ytPlayers[playerId].getPlayerState() === 1 ? ytPlayers[playerId].pauseVideo() : ytPlayers[playerId].playVideo();
  });
  if ($(window).width() < 750) {
    $('.list__mask').on('tap',function() {
      var thumb = $(this).prev('.list__thumb');
      thumb.prev('.list__yt').css('opacity','1');
      thumb.hide();
    });
  }else{
    $('.list__thumb').on('click',function() {
      $(this).hide();
    });
  }
}
function onPlayerReady(event) {
  // event.target.playVideo();
}
function onPlayerError(event) {
  console.log(e)
}

/*  slick  */
$(function () {
  var win = $(window);
  var slider = $("#js-slick");

  win.on("load resize", function () {
    if (win.width() < 768) {
      slider.not(".slick-initialized").slick({
        accessibility: true,
        draggable: true,
        arrows: true,
        swipe: true,
        dots: true,
        autoplay: false,
        infinite: true,
        cssEase: 'ease',
        slidesToShow: 1,
        slidesToScroll: 1
      });
    } else if (slider.hasClass("slick-initialized")) {
      slider.slick("unslick");
    }
  });

  slider.on('afterChange', function(event, slick, currentSlide){
    Object.keys(ytPlayers).forEach(function(key) {
      var ytPlayer = this[key];
      console.log(key, ytPlayer);
      ytPlayer.pauseVideo();
    }, ytPlayers);
  });
});

解説

元のソースだとコントローラーが触れなくなるので、被せるdivのサイズを調整し、コントローラー分は触れるように調整。

CSS
&__mask{
  @media screen and (max-width: 750px) {
    width: 100%;
    height: 70%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
  }
}

PCではボタンにhover効果をつけたかった＆slick不要なので、空divはスマホのときのみ生成されるように変更。

JS
if ($(window).width() < 750) {
  $('.list__ytwrap').append('<div class="list__mask"></div>');
}

PCではサムネイルをクリック・スマホではmaskをタップでサムネイル非表示＆再生開始するように変更。
スワイプ中に埋め込み動画がサムネイルより先に表示されてしまう不具合があったため、初期状態では埋め込み動画はopacity:0で非表示にし、タップでopacity:1になるよう調整も追加。

JS
if ($(window).width() < 750) {
  $('.list__mask').on('tap',function() {
    var thumb = $(this).prev('.list__thumb');
    thumb.prev('.list__yt').css('opacity','1');
    thumb.hide();
  });
}else{
  $('.list__thumb').on('click',function() {
    $(this).hide();
  });
}

以上。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?