JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのYouTube Player APIでYouTube動画を複数設置してマウスオーバーで再生

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

YouTube Player API

JavaScriptのYouTube Player APIでYouTube動画を複数設置してマウスオーバーで再生

JavaScriptのYouTube Player APIでYouTube動画を複数設置してマウスオーバーで再生

スマホでは「マウスオーバー」の概念がないので、複数のYouTube動画が並び再生ボタンタップで再生される普通のものになります。

かかかず
かかかず

完全に「デスクトップ向け」のスニペットです。

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

YouTube Player API

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

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

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

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

マウスオーバーで再生されるYouTube動画のサンプル

早速サンプルです。

YouTubeの動画が4つ並んでいますが、各種プレイヤーの上にマウスカーソルが乗っかると自動で再生が始まります。再生したプレイヤーに乗せたマウスカーソルが外れると、再生が停止します。

かかかず
かかかず

YouTube公式のサムネイル閲覧時と同じような挙動です。

実装の手順と方法

手順と方法

各コードの解説の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

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

<div class="ytPlayerBlock">
  <div id="player0" class="ytplayer"></div>
  <div id="player1" class="ytplayer"></div>
  <div id="player2" class="ytplayer"></div>
  <div id="player3" class="ytplayer"></div>
</div>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

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

// youtube api のスクリプト挿入
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// iframeの生成
var player = [];
function onYouTubeIframeAPIReady() {
    let w = '100%';
    let h = '100%';
    player['player0'] = new YT.Player( 'player0', {
        height: h,
        width: w,
        videoId: 'GLScmndu-XE',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player1'] = new YT.Player( 'player1', {
        height: h,
        width: w,
        videoId: 'APDDT03bSWU',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player2'] = new YT.Player( 'player2', {
        height: h,
        width: w,
        videoId: 'rW4Itck0Cv8',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player3'] = new YT.Player( 'player3', {
        height: h,
        width: w,
        videoId: 'MafQsaCutqA',
        events: {
            'onReady': onPlayerReady,
        }
    });
}

// 動画準備完了時にイベントの登録
function onPlayerReady() {

// player0
const ytplayer0 = document.getElementById( 'player0' );

    ytplayer0.addEventListener( 'mouseenter', () => {
        player['player0'].mute();
        player['player0'].playVideo();
    } );
    ytplayer0.addEventListener( 'mouseleave', () => {
        player['player0'].mute();
        player['player0'].stopVideo();
    } );

// player1
const ytplayer1 = document.getElementById( 'player1' );

    ytplayer1.addEventListener( 'mouseenter', () => {
        player['player1'].mute();
        player['player1'].playVideo();
    } );
    ytplayer1.addEventListener( 'mouseleave', () => {
        player['player1'].mute();
        player['player1'].stopVideo();
    } );

// player2
const ytplayer2 = document.getElementById( 'player2' );

    ytplayer2.addEventListener( 'mouseenter', () => {
        player['player2'].mute();
        player['player2'].playVideo();
    } );
    ytplayer2.addEventListener( 'mouseleave', () => {
        player['player2'].mute();
        player['player2'].stopVideo();
    } );

// player3
const ytplayer3 = document.getElementById( 'player3' );

    ytplayer3.addEventListener( 'mouseenter', () => {
        player['player3'].mute();
        player['player3'].playVideo();
    } );
    ytplayer3.addEventListener( 'mouseleave', () => {
        player['player3'].mute();
        player['player3'].stopVideo();
    } );

}
CSSを記述

最後にCSSの記述です。

.ytPlayerBlock {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

iframe.ytplayer {
    width: 49%;
    height: 220px;
}
@media screen and (max-width: 767px) {
  iframe.ytplayer {
    width: 100%;
  }
}
かかかず
かかかず

これで完成です。

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

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

HTML

HTMLは、YouTube Player APIを利用するので、id名がついた div タグです。div タグはレンダリングで、YouTube動画が配置される iframe タグに置換されます。

<div class="ytPlayerBlock">
  <div id="player0" class="ytplayer"></div>
  <div id="player1" class="ytplayer"></div>
  <div id="player2" class="ytplayer"></div>
  <div id="player3" class="ytplayer"></div>
</div>

class名は付けなくてもOKですが、flexboxのレイアウトで配置させる為 div タグに「ytplayer」を付けています。

JavaScript

JavaScriptは、YouTube Player APIを使う時のスクリプトを冒頭に入れ、そこからYouTubeプレイヤーの設定を記述します。

APIのJavaScriptコードが読み込まれると、APIは onYouTubeIframeAPIReady() を呼び出します。そして、その名前の関数をグローバルスコープとして定義して、プレイヤーの作成処理を行います。

// youtube api のスクリプト挿入
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// iframeの生成
var player = [];
function onYouTubeIframeAPIReady() {
    let w = '100%';
    let h = '100%';
    player['player0'] = new YT.Player( 'player0', {
        height: h,
        width: w,
        videoId: 'GLScmndu-XE',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player1'] = new YT.Player( 'player1', {
        height: h,
        width: w,
        videoId: 'APDDT03bSWU',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player2'] = new YT.Player( 'player2', {
        height: h,
        width: w,
        videoId: 'rW4Itck0Cv8',
        events: {
            'onReady': onPlayerReady,
        }
    });
    player['player3'] = new YT.Player( 'player3', {
        height: h,
        width: w,
        videoId: 'MafQsaCutqA',
        events: {
            'onReady': onPlayerReady,
        }
    });
}

// 動画準備完了時にイベントの登録
function onPlayerReady() {

// player0
const ytplayer0 = document.getElementById( 'player0' );

    ytplayer0.addEventListener( 'mouseenter', () => {
        player['player0'].mute();
        player['player0'].playVideo();
    } );
    ytplayer0.addEventListener( 'mouseleave', () => {
        player['player0'].mute();
        player['player0'].stopVideo();
    } );

// player1
const ytplayer1 = document.getElementById( 'player1' );

    ytplayer1.addEventListener( 'mouseenter', () => {
        player['player1'].mute();
        player['player1'].playVideo();
    } );
    ytplayer1.addEventListener( 'mouseleave', () => {
        player['player1'].mute();
        player['player1'].stopVideo();
    } );

// player2
const ytplayer2 = document.getElementById( 'player2' );

    ytplayer2.addEventListener( 'mouseenter', () => {
        player['player2'].mute();
        player['player2'].playVideo();
    } );
    ytplayer2.addEventListener( 'mouseleave', () => {
        player['player2'].mute();
        player['player2'].stopVideo();
    } );

// player3
const ytplayer3 = document.getElementById( 'player3' );

    ytplayer3.addEventListener( 'mouseenter', () => {
        player['player3'].mute();
        player['player3'].playVideo();
    } );
    ytplayer3.addEventListener( 'mouseleave', () => {
        player['player3'].mute();
        player['player3'].stopVideo();
    } );

}

プレイヤーの制御は、onReady イベントでプレイヤーの準備が整ったことを確認してから行っていき、そこで設置した各プレイヤーを .addEventListener の「mouseenter = マウスカーソルが乗っかった時」と「mouseleave = マウスカーソルが離れた時」の2つでそれぞれ再生と停止の制御を行わせます。

かかかず
かかかず

動画の再生をする場合には mute = 消音 も忘れずにしましょう。しないとユーザーもびっくりします。

CSS

CSSは、レイアウトのflexboxに関する記述だけでスマホ用に一個だけブレイクポイントを作り、プレイヤーのサイズを定義しています。

.ytPlayerBlock {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

iframe.ytplayer {
    width: 49%;
    height: 220px;
}
@media screen and (max-width: 767px) {
  iframe.ytplayer {
    width: 100%;
  }
}

タブレット等々、各種ウィンドウサイズに適合させる場合は適宜ブレイクポイントも追加するようにしましょう。

さいごに

いかがでしたでしょうか?

プレイヤーと動画の追加はベタ書きすることで追加できますが、数が増えた場合は結構大変なので、その場合はカスタマイズしてみてください。