railsでeachを使って取得した変数をjavascript内でどうすれば使えるか？

Question

下記のコードで@videosにeachを使って得たvideoという変数をjavascript内で使うにはどうすればよろしいでしょうか？

<h1>ビデオ</h1>
  <% @videos.each do |video| %>
  <div id="player">
 </div>
  <% end %>



<script>

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 player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
   height: '390',
   width: '640',
   videoId: 'ここで上記で使った変数videoを使いたい！',
   events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
   }
 });
}


function onPlayerReady(event) {
       event.target.playVideo();
     }

 var done = false;
       function onPlayerStateChange(event) {
         if (event.data == YT.PlayerState.PLAYING && !done) {
           setTimeout(stopVideo, 6000);
           done = true;
         }
       }
       function stopVideo() {
         player.stopVideo();
       }
</script>

Answer 1

<%=h video %>で、videoの値を出力できます。
が、video は配列videosの要素のようなので、複数ありますよね？
その複数の値と、JavaScriptコードの関係はどうなるのでしょうか？

あるいは、複数だと<div id="player">が複数個出来てしまうと言う矛盾もあるので、videosは必ず要素1つと言うことであれば、

<h1>ビデオ</h1>
 <div id="player">
 </div>
<script>
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 player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
   height: '390',
   width: '640',
   videoId: '<%=h videos[0] %>',
   events: {
     'onReady': onPlayerReady,
     'onStateChange': onPlayerStateChange
   }
 });
}
（以下略）

Comments

[Masaya_Murakami]

回答ありがとうございます。
自分のやりたいことはyoutube apiを使った動画の検索結果25件が入っている@videosからeachでそれぞれを取り出し、javascriptの中で記述してあるvideoId:の右にvideo.id.videoIdという形で書き、最終的には25件それぞれが<div id="player">として動画を持ったビューになることです。なので、<div id="player">をeachで複数作れないかなと思い、上記の記述にしました。他にいい方法はあるでしょうか？

[otn]

何がやりたいのかよく分かりませんが、同じid属性は1つしか置けませんよ。
また、
＞javascriptの中で記述してあるvideoId:の右にvideo.id.videoIdという形で書き
が意味不明です。videoは25個あることになりますが、25個並べる？？

[Masaya_Murakami]

説明不足ですみません。
ご指摘の問題に関して、自分でそれぞれのビデオに対して異なるidをもたせたところ解決しました。
ありがとうございました！

Answer 2

それぞれのビデオに異なるidを持たせることで解決。