javascript - 从 URL 嵌入 Youtube 视频

Question

我是前端这个神奇事物的新手，我已经在从事一个元素，但我需要一些帮助:

所以问题是用户可以在文本框中输入 youtube URL，然后会自动从中生成一个嵌入的 iframe 视频，这样他就可以在不重新加载页面的情况下进行预览

我该怎么做？

我找到了 2 个可以提供帮助的独立脚本，但我无法让它们同时工作:

从 URL 中提取 YouTube 视频 ID:

[http://codepen.io/catmull/pen/cnpsK][1]

使用 JavaScript 优化的 YouTube 嵌入:

[http://codepen.io/SitePoint/pen/CKFuh][1]

有什么想法吗？ 如果你用一个活生生的例子来回答，这对我真的很有帮助:)

Answer 1

如果你有youtube url https://www.youtube.com/watch?v=sGbxmsDFVnE , 您可以通过将视频 ID 从末尾取出并放在 youtube.com/embed/的末尾来嵌入它

您可以使用 string.split() 获取视频 ID

var url = "https://www.youtube.com/watch?v=sGbxmsDFVnE";
var id = url.split("?v=")[1]; //sGbxmsDFVnE

var embedlink = "http://www.youtube.com/embed/" + id; //www.youtube.com/embed/sGbxmsDFVnE

然后只需将源链接嵌入到页面上现有的 iframe

document.getElementById("myIframe").src = embedLink;

iframe 示例

<iframe id="myIframe" width="560" height="315" frameborder="0" allowfullscreen></iframe>

working code here