jQuery/Vanilla Javascript

YouTube APIの使い方とslickを使った自動再生の動画スライダーの作り方

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はスライダープラグインslick.jsを使用してYouTube動画のスライダーの作り方を解説していきます。

YouTubeの埋め込みタグで作成したスライダーと比較しつつ今回は最終的にYouTube API( YouTube IFrame Player API )を使用して本格的なスライダーサンプルを作成します。

まずYouTubeの埋め込みタグでスライダーを作成してみます。

スライダー部分はslickなどのjsプラグインを使用します。
公式サイト:slick

公式サイトのDownload Nowボタンからslick.css、slick-theme.css、slick.jsをダウンロードし、jQueryと共に読み込みます。

<link href="css/slick.css" rel="stylesheet" type="text/css">
<link href="css/slick-theme.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/slick.js"></script>

HTML

slider-forをメインビジュアルのスライド部分としYouTubeの動画の共有ボタンから埋め込みタグをコピーして貼り付けます。

slider-navをサムネイル部分としYouTubeの動画のサムネイルを表示させます。
YouTubeの動画のサムネイルは以下のサイトで動画URLを入力するとサムネイルのURLを取得できます。

YoutubeサムネイルURL取得

<div class="slider slider-for">
	<div class="wrap_movie">
		<iframe src="https://www.youtube.com/embed/GcfINC1TZv0?autoplay=1&mute=1&controls=0&loop=1&disablekb=1&showinfo=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
	<div class="wrap_movie">
		<iframe src="https://www.youtube.com/embed/sQlu57kj_90?autoplay=1&mute=1&controls=0&loop=1&disablekb=1&showinfo=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
</div><!-- slider-for -->
<div class="slider slider-nav">
	<div class="nav_movie">
	<img src="http://img.youtube.com/vi/GcfINC1TZv0/mqdefault.jpg" alt="">
	</div>
	<div class="nav_movie">
	<img src="http://img.youtube.com/vi/sQlu57kj_90/mqdefault.jpg" alt="">
	</div>
</div><!-- slider-nav -->

JS

スライダーのサムネイル部分の紐づけ( asNavFor: ‘.slider-for’ )やアニメーション設定をします。

<script>
$(document).ready(function() {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        speed: 500,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 5,
        speed: 500,
        asNavFor: '.slider-for',
        dots: true,
        focusOnSelect: true,
        slide: 'div'
    });
});
</script>

CSS

動画部分は幅100%表示にするのでアスペクト比を固定するようCSSで設定します。

アスペクト比の固定方法はこちらで詳しく解説しています。
【object-fit】縦横比維持、縦横センタリング、余白なしのトリミング、レスポンシブ、IE11まで対応の無敵サムネ作成

.wrap_movie{
	position: relative;
	overflow: hidden;
}
.wrap_movie::before{
	padding-top: 56.25%;
	display: block;
	content: "";
}
.wrap_movie iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

動画部分にブロック要素を重ねてマウス操作を無効にすることができます。

.slick-slider::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    position: absolute;
    top: 0;
    left: 0;
}

以上でYouTubeの埋め込みタグを使ったスライダーの完成になります。

サンプル

上記埋め込みタグのサンプルではループ再生、スマホ再生などが操作できないので次に解説するYouTube IFrame Player APIを使用して動画を表示することをお勧めします。

スライダー上にYouTube IFrame Player APIを使って複数の動画を表示させます。

HTML

各動画を表示するエリアにid=”wrap_movie01″のようにIDを付与しておきます。

	<div class="slider slider-for">
		<div id="wrap_movie01" class="wrap_movie"></div>
		<div id="wrap_movie02" class="wrap_movie"></div>
		<div id="wrap_movie03" class="wrap_movie"></div>
		<div id="wrap_movie04" class="wrap_movie"></div>
		<div id="wrap_movie05" class="wrap_movie"></div>
	</div><!-- slider-for -->
	<div class="slider slider-nav">
		<div class="nav_movie">
		<img src="http://img.youtube.com/vi/GcfINC1TZv0/mqdefault.jpg" alt="">
		</div>
		<div class="nav_movie">
		<img src="http://img.youtube.com/vi/sQlu57kj_90/mqdefault.jpg" alt="">
		</div>
		<div class="nav_movie">
		<img src="http://img.youtube.com/vi/LdFbjQjr_Sg/mqdefault.jpg" alt="">
		</div>
		<div class="nav_movie">
		<img src="http://img.youtube.com/vi/r8GuIF9f_HM/mqdefault.jpg" alt="">
		</div>
		<div class="nav_movie">
			<img src="http://img.youtube.com/vi/fWytAH6NteI/mqdefault.jpg" alt="">
		</div>
	</div><!-- slider-nav -->

JS

以下のようにiframe_apiを読み込みプレイヤー(ytPlayer)を宣言、設定します。

ytDataに各動画のIDと要素のIDを格納します。

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";// iframe_apiの読み込み
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
// プレーヤーを配列宣言します
var ytPlayer = [];
// 各動画のIDと要素のIDを格納します。
var ytData = [
    {
        id: 'GcfINC1TZv0',
        div_id: 'wrap_movie01'
    }, {
        id: 'sQlu57kj_90',
        div_id: 'wrap_movie02'
    }, {
        id: 'LdFbjQjr_Sg',
        div_id: 'wrap_movie03'
    }, {
        id: 'r8GuIF9f_HM',
        div_id: 'wrap_movie04'
    }, {
        id: 'fWytAH6NteI',
        div_id: 'wrap_movie05'
    }
];
 
// 各プレーヤーの埋め込み
function onYouTubeIframeAPIReady() {
    for(var i = 0; i < ytData.length; i++) {
        ytPlayer[i] = new YT.Player(ytData[i]['div_id'], {
            videoId: ytData[i]['id'],
            playerVars: {
				rel: 0,
				showinfo: 0,
				autoplay:1,
				controls:0,
				loop:1,
				playlist:ytData[i]['id'],//★loopする場合はplaylistを設定する必要がある
				playsinline: 1//←★スマホ対応
            },
            events: {
                'onReady': onPlayerReady
            }
        });
    }
}
 
// 各プレーヤー準備完了後の処理
function onPlayerReady(e) {
    for (var i = 0; i < ytData.length; i++) {
        if(e.target.getIframe().id == ytData[i]['div_id']) {
            console.log(ytData[i]['div_id'] + 'のプレーヤー準備完了しました。');
        }
    };
	e.target.mute();//★autoplayする場合はミュートする必要がある
	e.target.playVideo();
}
</script>

動画を自動再生させたい場合はplayerVarsにautoplay:1を設定します。
また自動再生はミュート時のみ有効となるためfunction onPlayerReady()でe.target.mute();にしておきます。

playerVars にloop:1を設定します。
playlist:に動画と同じIDもしくは変数を設定します。

playsinline: 1を追加します。

上記をすべて対応させたサンプルが以下になります。

サンプル

YouTube APIは簡単に導入できて細かな制御が可能となるのでとても便利です。
自動再生時のミュート設定やループ時はplaylistを設定する必要があるなど、少しわかりにくい部分もあるので今回まとめてみました。

関連動画

uhaha

YouTube動画を埋め込むならAPIを使用したほうが後々メンテナンスが楽かも。特に複数動画がある場合などは一気に制御できます。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*