How to embed youtube videos into a rails app dynamically

Question

So, I have a rails app that allows users to submit youtube links and rank the songs/links using the thumbs up gem.

However, users must physically copy and paste the link into the browser to listen to the song. For a better UX I'd like to have the submitted YouTube links be embedded into the app as videos. So, how can this be done dynamically?

In otherwords, you will be able to submit a YouTube link, it will be saved in e.g. song_id(1). You will be able to click song_id(1) and instead of just seeing the link you will also see the embedded YouTube video.

Updated show.html.erb:

<%- model_class = Song -%>
<div class="page-header">
  <h1><%=t '.title', :default => model_class.model_name.human.titleize %></h1>
</div>

<dl class="dl-horizontal">
  <dt><strong><%= model_class.human_attribute_name(:title) %>:</strong></dt>
  <dd><%= @song.title %></dd>
  <dt><strong><%= model_class.human_attribute_name(:url) %>:</strong></dt>
  <dd><%= YouTubeAddy.extract_video_id(@song.url) %> </dd>


<iframe width="#{width}" height="#{height}" src="http://www.youtube.com/embed/#{youtube_id}" frameborder="0"></iframe>

songhelper.rb

module SongsHelper

  def youtube_id
    YouTubeAddy.extract_video_id(@song.url)
  end

end

Answer 1

You can save the youtube video or vimeo video url as a string in your video column inside your songs table. So to show the video in your show page you will need to embed the video with the video ID. So let's say you have a songs table with a video column ok. Initially when a song is created the user added a youtube url or vimeo url. Great, now you got the entire string in your DB. There are many different video urls like .be and featured etc. so Better to cover them all and eliminate the margin of error.

With regex there is a few things you should do, to check the provider, and extract the ID. So you can go to your Helpers and add the following in your module, or you can add it to songs_helper.

So your application_helper.rb can look like this:

module ApplicationHelper
  def video_embed(video_url)

    # REGEX EXTRACT VIDEO ID
    regex_id = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/|vimeo\.com\/)([a-zA-Z0-9_-]{8,11})/
    match_id = regex_id.match(video_url)
    video_id = ""
    if match_id && !match_id[1].blank?
      video_id = match_id[1]
    end

    # REGEX EXTRACT PROVIDER - YOUTUBE OR VIMEO
    regex_prov = /(youtube|youtu\.be|vimeo)/
    match_prov = regex_prov.match(video_url)
    video_prov = ""
    if match_prov && !match_prov[1].blank?
      video_prov = case match_prov[1]
                     when "youtube"
                       :youtube
                     when "youtu.be"
                       :youtube
                     when "vimeo"
                       :vimeo
      end
    end

    case video_prov
      when :youtube
        "https://www.youtube.com/embed/#{video_id}"
      when :vimeo
        "https://player.vimeo.com/video/#{video_id}"
    end

  end
end

Now in your view. Let's say songs/show.html.erb you just call the method.

<iframe width="#{width}" height="#{height}" src="<%= video_embed(@song.video) %>" frameborder="0"></iframe>

Even better if you are using bootstrap you can use all the awesome bootstrap classes like this:

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="<%= video_embed(@song.video) %>" allowfullscreen></iframe>
</div>

Answer 2

I have forked a gist and conveted it into a proper Ruby class which supports embed url generation and/or iframe generation for youtube and as well as vimeo.

Usage

url = 'https://youtu.be/OaDhY_y8WTo'
generator = VideoEmbedUrlGenerator.new(url)

generator.construct_url
#=> "https://www.youtube.com/embed/OaDhY_y8WTo"

generator.construct_iframe
#=> "<iframe width=\"640\" height=\"480\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen, src='https://www.youtube.com/embed/OaDhY_y8WTo'></iframe>"

Implementation can be found here: gist

Answer 3

You could

1. Extract the id of the youtube video from the submitted link.

   for example, someone submits this link http://www.youtube.com/watch?v=XwmtNk_Yb2Q

   you'd want XwmtNk_Yb2Q

2. With that id you can render an iframe element, which embeds the video.

   <iframe width="#{width}" height="#{height}" src="http://www.youtube.com/embed/#{video_id}" frameborder="0"></iframe>

this is how it is done in @Elie Gnrd suggested gem.