嵌入来自 URL 的 Youtube 视频

Question

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

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

我该怎么做？

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

从 URL 中提取 YouTube 视频 ID：

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

YouTube 嵌入优化 JavaScript：

[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

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

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

iframe 示例

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

working code here

嵌入来自 URL 的 Youtube 视频

Embed Youtube video from URL

html

javascript

css

youtube