JavaScript

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

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

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

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>

slick.jsでmp4とYouTube動画をスライド表示するデモページ

実際の動作を確認したい方は、こちらのデモページをご覧ください。

slick.jsでmp4とYouTube動画をスライド表示するデモページ

参考にさせていただいたサイト

スマホOK!スライダーにYouTubeなど自動再生動画を使う方法(slick.js)

まとめ

slick.jsを用いることで、動画を活用した魅力的なウェブコンテンツの作成が可能です。この記事が、皆さんのウェブサイトやプロジェクトにおいて有効な参考となれば幸いです。今後もテクノロジーを活用したクリエイティブな表現方法を探求していきましょう!

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。