Question

我在所有这个令人惊奇的事情中都是新的，称为前端，我已经在一个项目中工作，但我需要一点帮助：

因此，用户可以在文本框中输入youtube网址，并自动生成嵌入式iframe视频，以便他可以预览而无需重新加载页面

我怎么能这样做？

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

从网址中提取YouTube视频ID：

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

YouTube嵌入使用JavaScript优化：

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

有什么想法吗？如果你回答一个现场的例子，它真的会对我有所帮助：）

Answer 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

从URL嵌入Youtube视频

1 个答案: