使用 JQuery HTML 插入 YouTube 播放器答案

【问题标题】：Insert YouTube player with JQuery HTML使用 JQuery HTML 插入 YouTube 播放器
【发布时间】：2015-10-22 12:43:42
【问题描述】：

我几乎完成了我投入大量工作的迷你项目！唯一的事情是现在我需要将一个 Youtube 链接播放器放入 HTML 中，而我现在真的不知道如何开始。

所以我正在做的是从我的 API 中获取信息，其中已经准备好 YouTube 链接，例如 https://youtu.be/Mh2ebPxhoLs，现在我需要将它作为 YouTube 播放器显示在我的 HTML 中。唯一的问题我真的不知道如何启动它。

这就是我的网站现在的样子：

如您所见，底部有一个 YouTube 预告片链接，我还没有达到那个“级别”，需要您的帮助！

基本上它是我正在寻找的电影的预告片，我希望它出现在海报下面的某个地方，但我可以自己完成。唯一的问题是现在我只需要知道如何让 YouTube 播放器理解 YouTube 链接。

现在我在我的 HTML 中使用 a

<div id="trailer"></div>

JS：

$('#trailer').html("Trailer: " + data.trailer);

我还没有用于预告片的 CSS。

所以我只想知道，如何让链接理解并使用 YouTube 播放器填充我的 HTML？

【问题讨论】：

我假设您想嵌入视频； <iframe width="420" height="315" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen></iframe>
是的类似的东西，但只有在 src 中我希望它链接到我在我的 api 中的链接，如果你明白我的意思吗？
转到 YouTube 上的任何视频，它会在某个地方提供获取其“嵌入”代码/HTML 的选项。只需更新您的 JS 以将该代码添加到您的 #trailer div 中 - 但动态使用您的 data.trailer 中的 YouTube ID，而不是其嵌入代码中包含的那个 YouTube。
@WeInThis 是从数据库中提取的电影+预告片链接，还是您自己通过 html 添加？
我有一个 API，它以 JSON 的形式返回结果，在 json 中我有链接，所以我想通过链接将它嵌入到 youtube 中。

标签： javascript jquery html css youtube

【解决方案1】：

据我了解，您希望从链接中获取 id 并使用它来用 youtube iframe 填充 html。您可以使用replace 来做到这一点。

var videoId = data.trailer.replace("https://youtu.be/", ""); //Leaves just the id
$('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + videoId + "' frameborder='0' allowfullscreen>");

【讨论】：

我马上试试。如果有什么事我会回来的:)
@WeInThis 如果这解决了您的问题，请将此答案标记为已接受答案
成功了！我这样做了 ´$('#trailer').html("Trailer: ");`` 并且成功了：D

【解决方案2】：

为 HTML 使用 iframe

<iframe id="videoArea" width="350" height="250" src="http://www.youtube.com/embed/X0DeIqJm4vM" frameborder="0" allowfullscreen></iframe>

然后，您可以使用您的链接创建 iframe 的属性映射器：

$('#videoArea').prop("src", data.trailer);

DEMO

【讨论】：