从 URL 嵌入 Youtube 视频

Question

我对前端这个神奇的东西很陌生，我\xc2\xb4m已经在一个项目中工作，但我需要一些帮助：

\n\n

因此，用户可以在文本框中输入 YouTube URL，然后自动生成嵌入的 iframe 视频，这样他就可以预览它而无需重新加载页面

\n\n

我怎么能这么做呢？

\n\n

a 发现了 2 个独立的脚本可以提供帮助，但我可以\xc2\xb4t 让它们同时工作：

\n\n

从 URL 中提取 YouTube 视频 ID：

\n\n

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

\n\n

使用 JavaScript 优化的 YouTube 嵌入：

\n\n

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

\n\n

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

\n

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>

工作代码在这里