从 URL 嵌入 Youtube 视频

Question

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

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

我怎样才能做到这一点？

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

从 URL 中提取 YouTube 视频 ID：

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

使用 JavaScript 优化的 YouTube 嵌入：

[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>

工作代码在这里

Answer 2

这是该函数的打字稿版本，适用于多个版本的 YouTube 视频网址：

export const youtubeUrlToEmbed = (urlString: string | undefined | null): string | null | undefined => {
    const template = (v: string) => `https://www.youtube.com/embed/${v}`;
    if (urlString) {
        const url = new URL(urlString);
        if (url.hostname === 'www.youtu.be' || url.hostname === 'youtu.be') {
            return template(url.pathname.substring(1));
        }
        const v = url.searchParams.get('v');
        if ((url.hostname === 'www.youtube.com' || url.hostname === 'youtube.com') && v) {
            return template(v);
        }
    }
    return urlString;
};