slick.jsを活用してmp4およびYouTube動画を効果的にスライド表示する方法｜DAD UNION

今回はWebページで動画を魅力的に表示する一つの方法として、slick.jsを使ったmp4とYouTube動画のスライド表示についてご紹介します。
この技術は、特にエンジニアの方々や、動画コンテンツを活用したいWebクリエイターに役立つでしょう。

mp4とYouTube動画なのでスマホにも対応出来ますが、iPhoneのsafariは動画の自動再生はされないです。

Contents

slick.jsとは？
mp4とYouTube動画をスライド表示するメリット
実装方法
slick.jsでmp4とYouTube動画をスライド表示するデモページ
参考にさせていただいたサイト
まとめ

slick.jsとは？

slick.jsは、jQueryプラグインの一つで、様々なカスタマイズが可能なスライダー機能を提供します。画像だけでなく、動画やiframeの埋め込みにも対応しており、レスポンシブデザインにも強いため、スマートフォンやタブレットでの表示にも最適です。

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>

HTML構造の設定

スライダーを表示するためのHTML構造を準備します。mp4ファイルとYouTubeのiframeをリスト形式で配置します。
スライド表示させる動画（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の記述

YouTube動画をスライド内で自動再生するために、YouTube IFrame Player APIを利用します。
まず、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>