Rails jsqrollを用いて複数の埋め込みyoutubeを表示し、再生をトリガーにjavascriptで処理を行う

Question

いつもお世話になっております。
現在RailsでWebページを作成しております。

現在、Railsでtwitterのようなもの作っており、
kaminari+jsqrollを用いて、画面の下に行くたびに、次の表示をデータベースからとってきて表示を繰り返しています。

それぞれの投稿の中には必ず動画ファイルが含まれており、それが再生された場合に、その投稿の動画が再生されたことをデータベースに書き込みたい状況です(javascriptでajaxで実行する予定です)。

まず大前提として、この再生したこと検知する方法はyoutube APIを使用しないと不可能でしょうか。
他の方法があるならばご教示いただけますと幸いです。

APIが必ず必要な場合なのですが、動画が複数ある時、APIを用いて判定する場合は下記サイトのような方法があることは分かったのですが、どのやりかたも初めから入ってくる動画のアドレスが分かっている書きかたをしております。

参考サイト
http://cly7796.net/wp/javascript/multiple-installation-in-youtube-player-api/

// 以下のように固定された書きかたをしている
// onYouTubeIframeAPIReadyの中が動的に変わっていく必要があるので
// どのようにすればよいのかが分からない状況です

プレーヤーの格納
  var ytPlayer = [];
  // プレーヤーのサイズ
  var ytWidth = 560;
  var ytHeight = 315;
  // 各動画情報
  var ytData = [
      {
          id: 'vTyalZzGqus',
          area: 'player_17'
      }, {
          id: 'aVUlFXBazL8',
          area: 'player_16'
      }, {
          id: 'TKFB7jisnnU',
          area: 'player_15'
      }, {
          id: 'MGnM-4JAcR8',
          area: 'player_14'
      }
  ];
  
  // 各プレーヤーの埋め込み
  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
              },
              events: {
                  'onReady': onPlayerReady,
                  'onStateChange': onPlayerStateChange
              }
          });
      }
  }

# 以下のようにkaminariでページネーションしており下にスクロールされるたびに
# プレイヤーのidが変更されてしまう

コントローラー側
@user = User.all

view側
<ul class="skill-list jscroll">
  <% @users.each do |user| %>
    <div id="player_<%= user.id %>"></div>
  <% end %>
  <%= paginate @users %>
</ul>

jsqrollを使用しているため、下に行くたびに、新しく動画のアドレスが呼ばれるような場合にどのように記述したらよいかが分からずこちらに質問させていただきました。

参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

環境
Amazon Linux release 2 (Karoo)
Rails 5.2.3
Ruby version: 2.6.1

Answer 1

最初に
<img src="http://i.ytimg.com/vi/[youtubeID]/maxresdefault.jpg" alt="" data-video="YouTube ID">
のような形で動画のサムネイル画像を表示し、その画像がクリックされたらyoutubeの再生を行う形にし、そのタイミングでjavascriptを行うことで、要件を満たす動きができました。