从 URL 嵌入 Youtube 视频答案

【问题标题】：Embed Youtube video from URL从 URL 嵌入 Youtube 视频
【发布时间】：2016-01-19 20:20:43
【问题描述】：

我是前端这个令人惊奇的东西的新手，我已经在一个项目中工作，但我需要一些帮助：

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

我该怎么做？

a 找到了 2 个单独的脚本，它们可能会有所帮助，但我无法让它们同时工作：

从 URL 中提取 YouTube 视频 ID：

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

使用 JavaScript 优化的 YouTube 嵌入：

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

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

【问题讨论】：

请在您的回答中附上您尝试过但无效的代码。
请通过添加您尝试实现此目的的代码编辑您的问题。您还可以在您的问题中编辑您提供的那些链接中的代码。为了增加获得答案的机会，您可以阅读一些guidelines on how to ask a good question。

标签： javascript html css youtube

【解决方案1】：

如果您有 youtube 网址 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

【讨论】：