jQueryで配列を作り、YouTubeを個別に再生させたいです。

前提・実現したいこと

YouTube API を使用し、
自前の再生ボタンをクリックしたときに YouTube を再生したいです。
ただ、YouTube 動画は複数あるため、配列を作る必要があります。

発生している問題

再生ボタンをクリックしたときに、
そのボタンに対応した動画を再生させたいのですが、
配列をどのように利用すればよいかが分かりません。

該当のソースコード

html
1<div class="movie-box">
2  <div class="movie-iframe">
3    <div id="movie-01" class="movie-player"></div>
4    <div id="movie-trigger-01" class="movie-btn pause"></div> <!-- 自前の再生ボタンをcssで表示。ここをクリックで動画を再生したい。 -->
5  </div>
6</div>
7
8<div class="movie-box">
9  <div class="movie-iframe">
10    <div id="movie-02" class="movie-player"></div>
11    <div id="movie-trigger-02" class="movie-btn pause"></div>
12  </div>
13</div>
14
15<div class="movie-box">
16  <div class="movie-iframe">
17    <div id="movie-03" class="movie-player"></div>
18    <div id="movie-trigger-03" class="movie-btn pause"></div>
19  </div>
20</div>

css
1.movie-iframe {
2  position: relative;
3  display: inline-block;
4  width: 100%;
5  height: 0;
6  padding-top: 61%;
7  margin-bottom: 24px;
8}
9
10.movie-iframe .movie-player {
11  position: absolute;
12  top: 0;
13  left: 0;
14  width: 100%;
15  height: 100%;
16  padding: 3.5%;
17}
18
19.movie-iframe .movie-btn {
20  display: -webkit-box;
21  display: -ms-flexbox;
22  display: flex;
23  -webkit-box-align: center;
24      -ms-flex-align: center;
25          align-items: center;
26  -webkit-box-pack: center;
27      -ms-flex-pack: center;
28          justify-content: center;
29  position: absolute;
30  top: 0;
31  left: 0;
32  width: 100%;
33  height: 100%;
34  pointer-events: none;
35  opacity: 0;
36}
37
38// 再生ボタン
39.movie-iframe .movie-btn:after {
40  display: -webkit-box;
41  display: -ms-flexbox;
42  display: flex;
43  -webkit-box-align: center;
44      -ms-flex-align: center;
45          align-items: center;
46  -webkit-box-pack: center;
47      -ms-flex-pack: center;
48          justify-content: center;
49  width: 72px;
50  height: 72px;
51  background: green;
52  content: "再生ボタン";
53}
54
55// .pause が付加されると、再生ボタンは非表示になる
56.movie-iframe .movie-btn.pause {
57  pointer-events: auto;
58  opacity: 1;
59}

js
1// IFrame Player API の読み込み
2var tag = document.createElement("script");
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName("script")[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7var ytPlayer = [];
8var ytWidth = 640;
9var ytHeight = 390;
10var ytData = [
11  {
12    id: "earTjC0iSjg",
13    area: "movie-01",
14    trigger: "#movie-trigger-01",
15  },
16  {
17    id: "RPV42aDjVSg",
18    area: "movie-02",
19    trigger: "#movie-trigger-02",
20  },
21  {
22    id: "WYlw-vPjOl0",
23    area: "movie-03",
24    trigger: "#movie-trigger-03",
25  },
26];
27
28function onYouTubeIframeAPIReady() {
29  for (var i = 0; i < ytData.length; i++) {
30    ytPlayer[i] = new YT.Player(ytData[i]["area"], {
31      width: ytWidth,
32      height: ytHeight,
33      videoId: ytData[i]["id"],
34      playerVars: {
35        rel: 0,
36      },
37    });
38  }
39
40  // 用意した再生ボタンクリック時の処理
41  $(ytData[i]["trigger"]).on("click", () => {
42    $(this).removeClass("pause"); // 再生ボタンの要素が非表示になる
43
44    // クリックした trigger に対応する動画を再生する記述。この記述が分かりません。
45  });
46}

試したこと

下記2ページを参考にし、試行錯誤しました。
ですが、クリックした要素に対して、
どのように配列から結びつけ、再生させるのかが分かりませんでした。

・YouTube Player APIを使う時のtips集 ※「6-2 複数埋め込む」を参照

・「YouTube API」を使って複数の動画を管理してみた

以上が質問です。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1// IFrame Player API の読み込み
2var tag = document.createElement("script");
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName("script")[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6var players = {};
7var ytPlayer = [];
8var ytWidth = 640;
9var ytHeight = 390;
10var ytData = [
11  {
12    id: "earTjC0iSjg",
13    area: "movie-01",
14    trigger: "#movie-trigger-01",
15  },
16  {
17    id: "RPV42aDjVSg",
18    area: "movie-02",
19    trigger: "#movie-trigger-02",
20  },
21  {
22    id: "WYlw-vPjOl0",
23    area: "movie-03",
24    trigger: "#movie-trigger-03",
25  },
26];
27
28function onYouTubeIframeAPIReady() {
29  for (var i = 0; i < ytData.length; i++) {
30    ytPlayer[i] = new YT.Player(ytData[i]["area"], {
31      width: ytWidth,
32      height: ytHeight,
33      videoId: ytData[i]["id"],
34      // プレイヤー側から制御するために付加するプロパティ
35      trigger: ytData[i]["trigger"],
36      playerVars: {
37        rel: 0,
38      },
39      events: {
40        // 再生／一時停止の状態変更時に実行する関数を指定
41        onStateChange: onPlayerStateChange,
42      },
43    });
44
45    // プレイヤーの登録
46    players[ytData[i]["trigger"]] = ytPlayer[i];
47
48    // 用意した再生ボタンクリック時の処理
49    $(ytData[i]["trigger"]).on("click", (e) => {
50      // ボタンを消す
51      $(e.target).removeClass("pause");
52      // 再生
53      players["#" + e.target.id].playVideo();
54    });
55  }
56}
57
58function onPlayerStateChange(event) {
59  switch (event.data) {
60    case YT.PlayerState.PAUSED: // 一時停止
61      // ボタンを表示する
62      $(event.target.i.i.trigger).addClass("pause");
63      break;
64    case YT.PlayerState.PLAYING: // 再生
65      // ボタンを消す
66      $(event.target.i.i.trigger).removeClass("pause");
67      break;
68  }
69}