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

サイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。

今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。

まずはデモ紹介

早速ですが、完成形デモをご紹介します。こちらをご覧ください。

<ul class="slider">
  <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-123540.mp4" autoplay loop muted></a></li>
  <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-2629-1.mp4" autoplay loop muted></a></li>
  <li><div id="youtube"></div></li>

</ul>

.slider{
    margin: 20px auto;
    width: 80%;
    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の設定
$('.slider').slick({
    autoplay:true, //自動スライド
    autoplaySpeed:3000, //スライドさせる間隔
    dots:true, //ドットインジケーターを表示
    lazyLoad:"progressive", //画像の遅延読み込み
    arrows:false, //スライドの左右の矢印ボタンを非表示
　 　cssEase:"cubic-bezier(0.9, 0.03, 0.4, 0.9)",　//CSS3アニメーションイージングを設定
　 　pauseOnHover:false
});
// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'youtube', // 埋め込む場所の指定
{
    videoId: 'q6T0wOMsNrI', // YouTubeのID
    playerVars: {
        height: '100%',
        width: '100%',
        loop: 1,//ループ設定
        playlist: 'q6T0wOMsNrI',//次に流すYouTubeのID　loopの設定が１の場合必須
        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();
}

はい。かしゆかかわいいですね。
次に作り方を見ていきましょう。

自動再生動画入りのスライドの作り方

スライダープラグイン「slick」で作成

今回のスライダーは、レスポンシブ・タッチデバイスにばっちり対応、カスタマイズ性も高いスライダープラグイン「slick」を使用しました。

slick – the last carousel you'll ever need

slickの基本形

まずは、slickをダウンロードして中のjsとcssを読み込みます。jQuery本体を設置するのも忘れないようにしましょう。

<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

続いてhtmlを記述します。cssは既に読み込んでいるので、新たに設定せずともスライダーの基本形は表示されます。スライダーの見た目を調整したい場合は適宜cssを追加してください。

<ul class="slider">
    <li><a href="#">動画をいれます。</a></li>
    <li><a href="#">動画をいれます。</a></li>
    <li><a href="#">動画をいれます。</a></li>
</ul>

次にjQueryでslickのスライド表示と動きを設定します。今回は以下のように設定にいたしました。スライダーの基本形はこれで完成です。

//slickの設定
$('.slider').slick({
    autoplay:true, //自動スライド
    autoplaySpeed:3000, //スライドさせる間隔
    dots:true, //ドットインジケーターを表示
    lazyLoad:"progressive", //画像の遅延読み込み
    arrows:false, //スライドの左右の矢印ボタンを非表示
　 　cssEase:"cubic-bezier(0.9, 0.03, 0.4, 0.9)"　//CSS3アニメーションイージングを設定
});

slickの他のカスタマイズは以下をご参考ください。

「slick」の使い方とオプションによるカスタマイズ | stand-4U

自動再生できる動画は消音限定

ここから自動再生動画をスライドに入れていくのですが、１つ注意点があります。

Safari(バージョン11.0)より、オーディオ付きのメディアが自動再生されない仕様に変更となりました。

制作側からするとかなり困る仕様変更ですが、ユーザー側としては、勝手に音が出るのはびくっとしますし、自動再生できなくなったのは良い対応ですね。

つまり、自動再生させたい動画は必ずミュートにしなければなりません。これを覚えておいてください。

HTML5 videoタグを使用

動画を入れ込むには2つの方法があります。まずはhtml5のvideoタグを使う方法です。

<ul class="slider">
  <li><a href="#"><video src="images/video1.mp4" autoplay loop muted></a></li>
  <li><a href="#"><video src="images/video2.mp4" autoplay loop muted></a></li>
  <li><a href="#"><video src="images/video3.mp4" autoplay loop muted></a></li>
</ul>

videoタグには属性を設定することで、動画の挙動を制御できます。今回は自動再生の「autoplay」、繰り返し再生する「loop」、ミュート設定の「muted」を設定しました。

ミュートと自動再生を同時に設定することで、自動再生が可能になります。videoタグのその他の属性については下記リンクをご参考ください。

<video>－HTML5タグリファレンス

YouTubeの埋め込み動画を使用

続いてYouTubeの動画を埋め込む方法の紹介です。こちらのが手順が少し複雑です。

videoタグと同様に、動画の挙動を制御するパラメータを設定できるですが、残念ながらミュートの設定はありません。そこで、YouTubeの「iframe API」を利用します。

まずは、htmlにAPIを読み込み、

<script src="https://www.youtube.com/iframe_api"></script>

つづいて、動画を読み込ませたい位置に以下のようにdivを記述します。

<ul class="slider">
    <li><div id="youtube"></div></li> <!--idのyoutubeは任意の指定です -->
    <li><div id="youtube2"></div></li> <!--idのyoutube2は任意の指定です -->
    <li><div id="youtube3"></div></li> <!--idのyoutube3は任意の指定です -->
</ul>

その後にjQueryでパラメータを設定を行います。パラメータの指定はコメントにしてありますので、そちらをご参考ください。
自動再生やループ設定の他に、YouTubeをデフォルトで読み込ませるとYouTubeのロゴやタイトル、関連動画などが表示されてしまうので、そのあたりを制御しました。

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'youtube', // htmlで指定したID
{
    videoId: 'q6T0wOMsNrI', // YouTubeのID
    playerVars: {
        height: '100%',
        width: '100%',
        loop: 1,//ループ設定
        playlist: 'q6T0wOMsNrI',//次に流すYouTubeのID　loopの設定が１の場合必須
        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();
}

最後にcssで読み込んだ動画表示を調整します。レスポンシブでも上手く表示できるように調整しました。

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

これで、YouTubeの埋め込みは完成です！

まとめ

以上が、スライダーに自動再生動画を使う場合の設置方法になります。

動画をスライドで見せる場合は、いくつも動画を読み込むことになると思うので、上記に加え、動画の軽量化や読み込むまでのローディングの設定なども重要になってくるなと感じました。

5G回線が普及すればもっと豊かなコンテンツの見せ方も登場してくると思います。今から楽しみです。それではまた！

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