Creating YT player for multiple video resources retrieved with Data API V3

Question

I've spent the better part of the day reading docs and watching various videos on how to embed YouTube on my site, and have made some good progress. But am now a bit stuck.

I'm working on a site that among other things, will look at my user's profile, get their favorite team, and then display videos uploaded by that team to it's official YouTube channel.

I'm working with the Data APi v3 and using HTTParty. I am able to get the video ids, which I need in order to retrieve each video resource. That works fine. Here is the code for that. (y_user is the channel name, and y_key is my API key)

__

getting the channel info....

response = HTTParty.get("https://www.googleapis.com/youtube/v3/channels?part=id%2C+snippet&forUsername=#{y_user}&key=#{y_key}")

channel_id = response["items"][0]["id"]

a new call, this time using channel id and requesting six video records from the channel.

channel_info = HTTParty.get("https://www.googleapis.com/youtube/v3/search?part=id%2C+snippet&channelId=#{channel_id}&maxResults=6&order=date&key=#{y_key}")

now getting video ids from each video record..

@video_ids = []
channel_info["items"].each do |item|
  @video_ids.push(item["id"]["videoId"])
end

getting video resource for each video id...and retrieving the embed code for a player.

@videos = []
@video_ids.each do |video_id|
  source = HTTParty.get("https://www.googleapis.com/youtube/v3/videos?part=id,snippet,player&id=#{video_id}&key=#{y_key}")
  single_video  = source["items"][0]["player"]["embedHtml"]
  @videos.push(single_video)
end

AND my HTML....

<% @videos.each do |v| %>
    <div class="video-slide"><%= v %></div>
<% end %>

What this returns for me is a six iframes corresponding to the six videos I requested, which is what I want. You can see that the video ID is unique for each....

<iframe type='text/html' src='http://www.youtube.com/embed/fNyKJjARuj4' width='640' height='360' frameborder='0' allowfullscreen='true'/>

<iframe type='text/html' src='http://www.youtube.com/embed/6HxJG60kZCI' width='640' height='360' frameborder='0' allowfullscreen='true'/>

etc....

What I am unclear on now is how to render a player for EACH (each will live in a slide). If I leave my code as is, I can see the iframe HTML as shown, but no player.

But if I add .html_safe....

<div class="video-slide"><%= v.html_safe %></div>

it renders a player - but only for one of the iframes. The others disappear entirely, even when inspecting the code.

I am uncertain of what to do at this point. I suspect that I should NOT be using html_safe and instead create the players for each iframe manually using info from the iframe api info page (below), but Im a bit overwhelmed at this point. Any help would be SUPER appreciated.

https://developers.google.com/youtube/iframe_api_reference#Examples

Answer 1

ALright, so I ended up just removing this:

@videos = []
@video_ids.each do |video_id|
  source = HTTParty.get("https://www.googleapis.com/youtube/v3/videos?part=id,snippet,player&id=#{video_id}&key=#{y_key}")
  single_video  = source["items"][0]["player"]["embedHtml"]
  @videos.push(single_video)
end

And instead just returned the raw video_ids array to the DOM and then iterated through that to get each video ID, then wrapped an iframe around it like so....

<% @video_ids.each do |v| %>
<iframe id="player" class="video-slide" type="text/html" width="600" height="375"
src="http://www.youtube.com/embed/<%= v %>?enablejsapi=1&origin=http://localhost:3000.com"
frameborder="0"></iframe>
<% end %>

And it works....more or less :)