YouTube Player API

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

2022年8月3日 10分

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

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

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

YouTube Player API
YouTube動画をスライダー表示したサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

YouTube Player API

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

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

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

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

参考YouTube Player APIを使う時のtips集Tips Note by TAM

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は調整程度のコードです。