使用 JQuery HTML 插入 YouTube 播放器

Question

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

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

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

如您所见，底部有一个 YouTube 预告片 link，我还没有完成 "level"，需要您的帮助！

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

现在我正在 HTML 中使用

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

JS:

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

我还没有 CSS 预告片。

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

Answer 1

据我了解，您想从 link 中获取 id 并用它来填充 html 和 youtube iframe。您可以使用 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>");

Answer 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

使用 JQuery HTML 插入 YouTube 播放器

Insert YouTube player with JQuery HTML

html

javascript

css

youtube

jquery