在 Phoenix EEX 模板中嵌入 Youtube 视频

Question

我写了下面的代码来显示项目：

<%= 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 %>

一切正常，除了这一行：

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

其中显示：

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

我是否需要修复我的路线或定义一个函数？...以下 Ruby 指南可能在 Phoenix/Elixir 中仍然有效，但需要进行一些调整：

Embed youtube video in rails

Answer 1

您似乎在使用视频的相对路径 URL。这意味着它将根据您当前的 URL.

投放

例如，如果您在 http://example.com/projects/1 并且 project.video_url 是 /some_video_url，则 iframe 将使用`http://example.com/some_video_url.

如果您尝试嵌入 YouTube 视频并且只有 ID，则需要在前面添加 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>

可能也值得将其移动到一个函数中，这样如果 YouTube 更新他们的嵌入 URL，您只需在一个地方进行更改。

Answer 2

用这个解决了：

<% 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>

在 Phoenix EEX 模板中嵌入 Youtube 视频

Embedding Youtube Videos in Phoenix EEX templates

youtube

iframe

elixir

phoenix-framework