自身のウェブサイトで、YouTubeの埋め込み動画をかっこよくスライダーで表示させたいと考えたことはないでしょうか？今回はその実装サンプルをご紹介します。（最後にサンプルファイルのダウンロードリンクを記載しています）
デモ
実装の準備
今回スライダーには「Swiper」というJavascriptライブラリを利用します。
このライブラリを使うには以下のJSファイルとCSSファイルをCDNで読み込ませておく必要があります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
実装方法
HTML部
<div id="slider" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- YouTube埋め込みコード -->
</div>
<div class="swiper-slide">
<!-- YouTube埋め込みコード -->
</div>
<div class="swiper-slide">
<!-- YouTube埋め込みコード -->
</div>
</div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<div id="thumbs" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- YouTube動画サムネイル -->
</div>
<div class="swiper-slide">
<!-- YouTube動画サムネイル -->
</div>
<div class="swiper-slide">
<!-- YouTube動画サムネイル -->
</div>
</div>
</div>
動作確認がしやすいようにサンプルでは動画を３つ表示する設定としていますが、動画数を変更したい場合は「swiper-slideクラス」を追加・削除すればＯＫです。
[blogcard url=”https://html-css-javascript.com/youtube-thumb/”]
JS部
<script>
<!--
var slider = new Swiper ('#slider', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev'
})
var thumbs = new Swiper('#thumbs', {
centeredSlides: true,
spaceBetween: 10,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true
});
slider.params.control = thumbs;
thumbs.params.control = slider;
-->
</script>
Javascriptコードはこのライブラリでのほぼ定型のサンプルコードとなりますのであまり深く考えずにコピペしてもらえばよいと思います。
CSS部
<style>
.swiper-container{
text-align: center;
}
.swiper-container .swiper-slide img{
max-width: 100%;
width: 100%;
height: auto;
}
.swiper-container .swiper-slide {
position: relative;
width: 100%;
}
.swiper-container .swiper-slide:before {
content:"";
display: block;
padding-top: 56.25%;
}
.swiper-container .swiper-slide iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#thumbs {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
#thumbs .swiper-slide {
width: 20%;
height: 100%;
opacity: 0.2;
cursor: pointer;
}
#thumbs .swiper-slide:before {
content:none;
}
#thumbs .swiper-slide-active {
opacity: 1;
}
</style>
こちらはもともと画像ベースのサンプルコードでしたが今回iframe向けに改造をしています。レスポンシブデザインでも動画プレイヤーの縦横比を保つ仕様としているのでスマートフォンでのデザイン崩れも回避できるかと思います。
まとめ
ただ動画を見せるだけでなくおしゃれに演出したいといった場合には重宝する実装サンプルになるかと思いますので、よろしければコピペでお使いいただければと思います。
最後にサンプルファイルを用意いたしましたので、以下リンクから名前をつけてファイルを保存でダウンロードしてください。