質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.13%

jQueryにて、YouTube API を使って複数の動画を埋め込み、個別に再生させたいです。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 42

score 5

閲覧いただきありがとうございます。
普段 JavaScript はプラグインのオプションを変更する程度であまり経験がありません。

前提・実現したいこと

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

発生している問題

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

該当のソースコード

<div class="movie-box">
  <div class="movie-iframe">
    <div id="movie-01" class="movie-player"></div>
    <div id="movie-trigger-01" class="movie-btn pause"></div> <!-- 自前の再生ボタンをcssで表示。ここをクリックで動画を再生したい。 -->
  </div>
</div>

<div class="movie-box">
  <div class="movie-iframe">
    <div id="movie-02" class="movie-player"></div>
    <div id="movie-trigger-02" class="movie-btn pause"></div>
  </div>
</div>

<div class="movie-box">
  <div class="movie-iframe">
    <div id="movie-03" class="movie-player"></div>
    <div id="movie-trigger-03" class="movie-btn pause"></div>
  </div>
</div>
.movie-iframe {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding-top: 61%;
  margin-bottom: 24px;
}

.movie-iframe .movie-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 3.5%;
}

.movie-iframe .movie-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

// 再生ボタン
.movie-iframe .movie-btn:after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 72px;
  height: 72px;
  background: green;
  content: "再生ボタン";
}

// .pause が付加されると、再生ボタンは非表示になる
.movie-iframe .movie-btn.pause {
  pointer-events: auto;
  opacity: 1;
}
// IFrame 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);

var ytPlayer = [];
var ytWidth = 640;
var ytHeight = 390;
var ytData = [
  {
    id: "earTjC0iSjg",
    area: "movie-01",
    trigger: "#movie-trigger-01",
  },
  {
    id: "RPV42aDjVSg",
    area: "movie-02",
    trigger: "#movie-trigger-02",
  },
  {
    id: "WYlw-vPjOl0",
    area: "movie-03",
    trigger: "#movie-trigger-03",
  },
];

function onYouTubeIframeAPIReady() {
  for (var i = 0; i < ytData.length; i++) {
    ytPlayer[i] = new YT.Player(ytData[i]["area"], {
      width: ytWidth,
      height: ytHeight,
      videoId: ytData[i]["id"],
      playerVars: {
        rel: 0,
      },
    });
  }

  // 用意した再生ボタンクリック時の処理
  $(ytData[i]["trigger"]).on("click", () => {
    $(this).removeClass("pause"); // 再生ボタンの要素が非表示になる

    // クリックした trigger に対応する動画を再生する記述。この記述が分かりません。
  });
}

試したこと

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る