'Embedding Youtube Videos in Phoenix EEX templates

I wrote the following code to display projects:

<%= for project <- @projects do %>
<div class="col-sm-4">
 <div class="panel panel-default"  style="min-height: 1200px; margin-bottom:50px;height:auto;">
    <div class="panel-heading">
        <img src="<%= Microflow.Avatar.url({project.picture, project}, :original) %>" alt="" width="330px" height="240px"/>

      </div>
    <div class="panel-body" style="min-height: 350px">
      <h2 style="font-family: 'Montserrat', sans-serif;"><%= project.name %></h2>
      <h3 style="font-family: 'Raleway', sans-serif;"><%= raw(project.description) %></h3>
      <h2 style="font-family: 'Montserrat', sans-serif;">

      </h2>
      <h2 style="font-family: 'Montserrat', sans-serif;"><%= project.raise_amount %> USD</h2>
    <iframe width="100%" height="100%" src= "<%=project.video_url%>"</iframe>  
<%= link "Delete Project", to: project_path(@conn, :delete, project), method: :delete, data: [confirm: "Are you sure?"], class: "btn btn-info btn-xs" %>
<%= link "Start Your Own Project", to: project_path(@conn, :new), method: :new, class: "btn btn-success btn-xs" %>
          </div>
           </div>
             </div>
<% end %>

It all works fine, apart from this line:

<iframe width="100%" height="100%" src= "<%=project.video_url%>"</iframe>

Which displays: 

"No route found for GET /Video%20Goes%20Here (MyApp.Router)"

Do I need to fix my routes or define a function?... The following Ruby guide may still work in Phoenix/Elixir, with some adjustments:

How to add youtube frame to ERB file Embed youtube video in rails

iframeyoutubeelixirphoenix-framework


Solution 1:[1]

It looks like you might be using a relative path for the video URL. This means that it will be served relative to your current URL.

For example, if you are on http://example.com/projects/1 and the project.video_url is /some_video_url then the iframe will use`http://example.com/some_video_url.

If you are trying to embed a YouTube video and only have the id, then you will need to prepend https://www.youtube.com/embed/ which means the iframe will use https://www.youtube.com/embed/some_video_id:

<iframe width="100%" height="100%" src= "https://www.youtube.com/embed/<%=project.video_url%>"</iframe>

It might also be worth moving this into a function so that if YouTube update their embed URL you only need to make the changes in one place.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gazler

Related Questions