Search code examples
iframeyoutubeelixirphoenix-framework

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


Solution

  • Solved it with this:

    <% video_string = to_string(project.video_url) %>
     <% video = String.slice(video_string,32,String.length(video_string)) %>
     <iframe width="100%" height="100%" position= "absolute"  src="https://www.youtube.com/embed/<%=video%>"></iframe>