JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

YouTube Player API

JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー

JavaScriptのYouTube Player APIとSwiperでYouTube動画のスライダー

YouTube Player API・・。簡単にプレイヤーの設定が可能で、カスタマイズもしやすく本当便利ですよね。

今回は、そんなYouTube APIとスライダー・カルーセルUIを絡めたスニペットです。

是非、最後までご覧いただけると嬉しいです。

YouTube Player API

YouTube Player APIは、YouTubeの動画を埋め込むことができるAPIです。

APIを使わない場合、HTMLの iframe で埋め込むことができますが、APIはJavaScriptで提供されており、再生や停止の挙動や、再生条件の設定が色々できたりと応用が効くので、非常に便利です。

外部リンク iframe 組み込みの YouTube Player API リファレンス

この記事ではこのAPIを使い、以下の記事を参考にしていますので、こちらの記事も参考にしてみてください。

YouTube動画をスライダー表示したサンプル

早速サンプルです。

4つのYouTube動画がスライダーの中に格納されていて、左右の切り替えボタンでYouTube動画の切り替えが可能です。

スライダーで切り替えをしたYouTube動画は一時停止になり、新しく表示されたYouTube動画はミュートで再生が始まります。

実装の手順と方法

手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。全部で4つのSTEPで完了します。

Swiperを記述

はじめにSwiper本体を読み込ませる必要があるので、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

この記事では、記述するだけでOKなCDNでの読み込みの場合で進めます。

HTMLを記述

次に、HTMLの設置したい場所にコードを記述します。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><div id="player1"></div></div>
        <div class="swiper-slide"><div id="player2"></div></div>
        <div class="swiper-slide"><div id="player3"></div></div>
        <div class="swiper-slide"><div id="player4"></div></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
JavaScriptを記述

次に、JavaScriptでSwiperのオプションを記述します。

コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

// YouTube Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Playerの設定
var yt = [];
function onYouTubeIframeAPIReady() {
    // 描画サイズ
    let w = '100%';
    let h = '100%';
    // 各YouTubeのIDを指定
    yt['player1'] = new YT.Player('player1', {
        width: w,
        height: h,
        videoId: 'k5eNRgAhHqk',
        events: {
            'onReady': onPlayerReady,
        },
    });
    yt['player2'] = new YT.Player('player2', {
        width: w,
        height: h,
        videoId: 'TxK2Sj5fj_c',
    });
    yt['player3'] = new YT.Player('player3', {
        width: w,
        height: h,
        videoId: 'vyUMYYc8lxU',
    });
    yt['player4'] = new YT.Player('player4', {
        width: w,
        height: h,
        videoId: '0rvqWa8Mnsg',
    });
}
// 準備完了時の設定
function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}
// Swiperの設定
const swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});
// Playerの一時停止
swiper.on('transitionStart', function(){
    yt['player1'].pauseVideo();
    yt['player2'].pauseVideo();
    yt['player3'].pauseVideo();
    yt['player4'].pauseVideo();
});
// 切り替え時の処理
swiper.on('transitionEnd', function(){

    var index = this.realIndex;
    var slide = document.getElementsByClassName('swiper-slide')[index];
    var slideVideo = slide.getElementsByTagName('iframe')[0];
    var slideVideoId = slideVideo.getAttribute('id');

    if(slideVideo != null || slideVideo != undefined){
        yt[slideVideoId].mute();
        yt[slideVideoId].playVideo();
    }
});
CSSを記述

最後にCSSを書きましょう。これで見た目を整えたら完了です。

/* コンテナのサイズ調整 */
.swiper-container {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
}
/* ページネイションをinlineで中央に */
.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    display: inline-block;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

ざっくりとしたコードの解説

コードについてざっくりですが解説します。コードはHTML・JavaScript・CSSの3種類です。

HTML

HTMLでは、まずはじめにSwiper本体を読み込ませる必要があるので、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

このコードはCDNで読み込ませる方法です。ダウンロードして使う場合は、設置したパスを<head>〜</head> の中に記述しましょう。

そして次に、スライダーを設置したい場所に以下のHTMLを記述します。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><div id="player1"></div></div>
        <div class="swiper-slide"><div id="player2"></div></div>
        <div class="swiper-slide"><div id="player3"></div></div>
        <div class="swiper-slide"><div id="player4"></div></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Swiperを使った構文でよく見るもので、「swiper-container」が親要素。「swiper-wrapper」が各スライダーを格納する子要素で、子要素に並列でページネイションとページ送りが並びます。

かかかず
かかかず

「player○」のid名がつく div 要素がレンダリングで iframe タグに置換されます。

JavaScript

JavaScriptのコードは、ざっくり言うと「YouTube Playerの設定」「Swiperの設定」の2種で大きく分かれます。

YouTube Playerの設定は冒頭の方に記述をして、再生する動画の指定や準備完了後の設定を行います。

// YouTube Player APIの読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Playerの設定
var yt = [];
function onYouTubeIframeAPIReady() {
    // 描画サイズ
    let w = '100%';
    let h = '100%';
    // 各YouTubeのIDを指定
    yt['player1'] = new YT.Player('player1', {
        width: w,
        height: h,
        videoId: 'k5eNRgAhHqk',
        events: {
            'onReady': onPlayerReady,
        },
    });
    yt['player2'] = new YT.Player('player2', {
        width: w,
        height: h,
        videoId: 'TxK2Sj5fj_c',
    });
    yt['player3'] = new YT.Player('player3', {
        width: w,
        height: h,
        videoId: 'vyUMYYc8lxU',
    });
    yt['player4'] = new YT.Player('player4', {
        width: w,
        height: h,
        videoId: '0rvqWa8Mnsg',
    });
}
// 準備完了時の設定
function onPlayerReady(event) {
    event.target.mute();
    event.target.playVideo();
}
// Swiperの設定
const swiper = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});
// Playerの一時停止
swiper.on('transitionStart', function(){
    yt['player1'].pauseVideo();
    yt['player2'].pauseVideo();
    yt['player3'].pauseVideo();
    yt['player4'].pauseVideo();
});
// 切り替え時の処理
swiper.on('transitionEnd', function(){

    var index = this.realIndex;
    var slide = document.getElementsByClassName('swiper-slide')[index];
    var slideVideo = slide.getElementsByTagName('iframe')[0];
    var slideVideoId = slideVideo.getAttribute('id');

    if(slideVideo != null || slideVideo != undefined){
        yt[slideVideoId].mute();
        yt[slideVideoId].playVideo();
    }
});

後半はSwiperの設定で、切り替え時や一時停止などの設定を行いスライダーの制御を行います。

かかかず
かかかず

コードにはYouTubeの動画IDが入ってるので、書き換えて利用ください。

CSS

CSSは、Swiper本体のインストールで利用したスタイルでほぼ出来上がるので、必要ないっちゃないですが、細かな調整でスタイルをあてています。

/* コンテナのサイズ調整 */
.swiper-container {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
}
/* ページネイションをinlineで中央に */
.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    display: inline-block;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
}

上記のようにコンテナのサイズと、YouTubeのコントロールパネル(再生やミュート解除)をクリックできるようページネイションを調整しているコードのみです。

かかかず
かかかず

このCSSは調整程度のコードです。

さいごに

Swiperを使うことで、ネイティブなJavaScriptでスライダー・カルーセルの実装が簡単に行え、かつAPIでYouTubeと絡めることができます。

どちらも簡単な記述で可能なので、カスタマイズするなりして利用してみてください。