JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのYouTube Player APIで複数のサムネイル付き動画の設置

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

YouTube Player API

JavaScriptのYouTube Player APIで複数のサムネイル付き動画の設置

JavaScriptのYouTube Player APIで複数のサムネイル付き動画の設置

YouTubeにはいくつかのAPIが用意されていて、YouTube Player APIはIframeで動画の組み込みをするAPIです。

詳細のリファレンスでいろんなカスタマイズも可能なAPIですが、この記事では複数動画を設置する基本の使い方についての内容です。

かかかず
かかかず

用途としては、サムネイル付きでYouTube動画の一覧ページを作る時でしょうか・・。

参考記事と併せて紹介しているので、是非最後までご覧いただけたら嬉しいです。

YouTube Player API

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

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

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

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

複数のYouTube動画サムネイルが並ぶサンプル

早速、YouTube Player APIを使ったサンプルです。

4つ並んだサムネイルをクリックすると、各YouTubeの動画がローディングされて再生が始まります。

サンプルでは4つの動画を設置していますが、JavaScriptのコードで簡単に追加が可能です。

実装の手順と方法

手順と方法

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

HTMLを記述

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

<ul class="ytList">
<li>
  <div id="ytVideo1" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo2" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo3" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo4" class="loadBefore"></div>
</li>
</ul>
JavaScriptを記述

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

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

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var youtubeData = [
  {
    youtubeIid: 'HtnGqgW_Hig',
    embedArea: 'ytVideo1'
  }, {
    youtubeIid: '-RYtwwaBVB8',
    embedArea: 'ytVideo2'
  }, {
    youtubeIid: 'HxTQF1bCyag',
    embedArea: 'ytVideo3'
  }, {
    youtubeIid: 'k5eNRgAhHqk',
    embedArea: 'ytVideo4'
  }
];
 
function onYouTubeIframeAPIReady() {
  for (var i = 0; i < youtubeData.length; i++) {
    document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
    embedYoutube(i);
  }
}
 
// YouTubeの埋め込みの準備
var ytPlayer;
function embedYoutube(num) {
  // サムネイルクリックでYouTubeを埋め込むようにする
  document.getElementById('yt-thumb' + num).addEventListener('click', function() {
    ytPlayer = new YT.Player(
      youtubeData[num]['embedArea'], // 埋め込む場所の指定
      {
        width: 400, // プレーヤーの幅
        height: 280, // プレーヤーの高さ
        videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
        events: {
            'onReady': onPlayerReady
        }
      }
    );
  });
}
 
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}
CSSを記述

最後にCSSの記述です。

ul.ytList {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 20px;
    border: none;
}
ul.ytList li {
    width: calc(100% / 2 - 20px);
    padding: 0;
    background: #000;
}
ul.ytList li .loadBefore {
    position: relative;
}
ul.ytList li .loadBefore:before {
    content: "\f144";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 3.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.4;
    pointer-events: none;
}
ul.ytList li .loadBefore:hover:before {
    opacity: 1;
    color: #D80C18;
}

ul.ytList li img {
    cursor: pointer;
    height: 280px;
    object-fit: cover;
}
かかかず
かかかず

これで完成です。

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

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

HTML

HTMLは、ul リストタグの中に div タグが並びます。

各サムネイルをクリックすると「loadBefore」のclass名がつく div タグが、iframe タグに置換されてYouTube動画の再生が始まります。

<ul class="ytList">
<li>
  <div id="ytVideo1" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo2" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo3" class="loadBefore"></div>
</li>
<li>
  <div id="ytVideo4" class="loadBefore"></div>
</li>
</ul>

div タグのid名は、後述するJavaScriptの embedArea と一致させる必要があるので、変更する場合はJavaScriptのコードも変更するようにしてください。

JavaScript

JavaScriptは、YouTube Player APIで動画を設置します。各動画は、var youtubeData の中の youtubeIid にYouTube動画のURLを記述します。

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
var youtubeData = [
  {
    youtubeIid: 'HtnGqgW_Hig',
    embedArea: 'ytVideo1'
  }, {
    youtubeIid: '-RYtwwaBVB8',
    embedArea: 'ytVideo2'
  }, {
    youtubeIid: 'HxTQF1bCyag',
    embedArea: 'ytVideo3'
  }, {
    youtubeIid: 'k5eNRgAhHqk',
    embedArea: 'ytVideo4'
  }
];
 
function onYouTubeIframeAPIReady() {
  for (var i = 0; i < youtubeData.length; i++) {
    document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
    embedYoutube(i);
  }
}
 
// YouTubeの埋め込みの準備
var ytPlayer;
function embedYoutube(num) {
  // サムネイルクリックでYouTubeを埋め込むようにする
  document.getElementById('yt-thumb' + num).addEventListener('click', function() {
    ytPlayer = new YT.Player(
      youtubeData[num]['embedArea'], // 埋め込む場所の指定
      {
        width: 400, // プレーヤーの幅
        height: 280, // プレーヤーの高さ
        videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
        events: {
            'onReady': onPlayerReady
        }
      }
    );
  });
}
 
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

.addEventListener のクリックイベントを設定して、クリックでサムネイルの動画に置き換わり、 onPlayerReady のイベントで自動再生が始まります。

かかかず
かかかず

コードの addEventListener のclick を mouseenter に置き換えると、hoverで動画再生もできますね。

CSS

CSSは、flexboxで並べたレイアウトの記述です。

ul.ytList {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: 20px;
    border: none;
}
ul.ytList li {
    width: calc(100% / 2 - 20px);
    padding: 0;
    background: #000;
}
ul.ytList li .loadBefore {
    position: relative;
}
ul.ytList li .loadBefore:before {
    content: "\f144";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 3.1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.4;
    pointer-events: none;
}
ul.ytList li .loadBefore:hover:before {
    opacity: 1;
    color: #D80C18;
}

ul.ytList li img {
    cursor: pointer;
    height: 280px;
    object-fit: cover;
}
アイコンはFontAwesome

サムネイルに表示される再生アイコンは、FontAwesomeを使用しています。この記事のコードをそのまま利用するには、FontAwesome本体の読み込みも行うようにしてください。

さいごに

今回は、YouTubeの動画IDをもとにAPIで作成した iframe タグの再生を行う内容でした。

上記を参考にカスタマイズして利用してみてください。