slick.jsを使ってmp4とYouTube動画をスライド表示する方法｜DAD UNION

slick.jsを使ってmp4とYouTube動画をスライド表示する方法をご紹介します。
mp4とYouTube動画なのでスマホにも対応出来ますが、iPhoneのsafariは動画の自動再生はされないです。

Contents

slick.jsを使ってmp4とYouTube動画をスライド表示するCSS記述
slick.jsを使ってmp4とYouTube動画をスライド表示するHTML記述
slick.jsを使ってmp4とYouTube動画をスライド表示するJavaScriptの記述
slick.jsでmp4とYouTube動画をスライド表示するデモページ
参考にさせていただいたサイト

slick.jsを使ってmp4とYouTube動画をスライド表示するCSS記述

※CDNのslick.css、slick-theme.cssファイルを読み込みます。スライドエリア（.slider）とドットインジケーター（.slick-dots）等のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  line-height: 2em;
  padding-bottom: 20px;
}
.slider{
  margin: 0;
  padding: 0;
  width: 100%;
  opacity: 0;
  transition: 3s;
}
.slick-initialized{
  opacity: 1
}
.slider img,
.slider video,
.sliderBox iframe{
  width: 100%;
  height: auto;
}
.slick-slide li{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.slick-slide iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slick-dots{
  bottom: 30px;
}
.slick-dots li button{
  width: 40px;
  height: 40px;
}
.slick-dots li button:before {
  line-height: 40px;
  width: 40px;
  height: 40px;
  opacity: 1;
  color: #ffffff;
  font-size: 16px;
}
.slick-dots li.slick-active button:before {
  opacity: 1;
  color: #000000;
}
</style>

slick.jsを使ってmp4とYouTube動画をスライド表示するHTML記述

※スライド表示させる動画（tree.mp4）とYouTube動画出力先（id=”youtube”）を用意します。

<h1>slick.jsを使ってmp4とYouTube動画をスライド表示</h1>

<ul class="slider">
  <li>
    <video autoplay loop muted poster="https://dad-union.com/demo/js/20230209-covervid/tree.jpg">
      <source src="https://dad-union.com/demo/js/20230209-covervid/tree.mp4" type="video/mp4">
    </video>
  </li>
  <li><div id="youtube"></div></li>
</ul>

slick.jsを使ってmp4とYouTube動画をスライド表示するJavaScriptの記述

※jquery-2.1.4.min.js、slick.jsファイルを読み込みます。YouTube動画APIの「https://www.youtube.com/iframe_api」をscriptタグとして読み込みます。$(‘スライド表示エリア’).slick({オプション})、function onYouTubeIframeAPIReady() {出力先エリア,{YouTube動画表示オプション}})を記述します。YouTube動画表示オプションでは動画IDやコントローラー、タイトル表示等の設定を行います。

<script src="jquery-2.1.4.min.js"></script>
<script src="slick.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
//slick
$('.slider').slick({
    autoplay:true,
    autoplaySpeed:5000,
    dots:true,
    lazyLoad:"progressive", //画像の遅延読み込み
    arrows:false,
    pauseOnHover:false
});

//YouTube
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'youtube', // 出力先タグid
{
    videoId: 'P7Od94ikeoI', // YouTube動画ID
    playerVars: {
        height: '100%',
        width: '100%',
        loop: 1,
        playlist: 'P7Od94ikeoI',
        controls: 0,//コントローラー無
        autoplay: 1,
        showinfo: 0,//動画タイトル非表示
        rel: 0,//関連動画制御
        iv_load_policy: 3,//動画アノテーション
        start: 30 //スタート秒数
    },
    events: {
        'onReady': onPlayerReady
    }
}
);
}

//準備完了
function onPlayerReady(event) {
  event.target.playVideo();
  event.target.mute();
}
</script>