X-Frame-Options 拒绝加载：http://www.youtube.com/v/g5RM5StrMXY 不允许跨域框架答案

【问题标题】：Load denied by X-Frame-Options: http://www.youtube.com/v/g5RM5StrMXY does not permit cross-origin framingX-Frame-Options 拒绝加载：http://www.youtube.com/v/g5RM5StrMXY 不允许跨域框架
【发布时间】：2013-02-22 17:59:39
【问题描述】：

我在 ASP.NET 中有一个网站。

页面加载后，出现以下错误。

错误： X-Frame-Options 拒绝加载：http://www.youtube.com/v/lgZBsWGaQY0&feature 不允许跨域框架。

由于此错误，YouTube 视频无法在 iframe 中打开。

<div style="display: none; position: relative;">
    <div id="divYouTubeClasses">
        <iframe id="Iframe1" style="background-color: White !important; border: 0;" width="835"
                    height="430" src="http://www.youtube.com/v/g5RM5StrMXY" scrolling="no"></iframe>
    </div>
</div>

请为此错误提供一些解决方案。

【问题讨论】：

标签： asp.net asp.net-mvc asp.net-mvc-3 iframe

【解决方案1】：

查询中的原始 URL

http://www.youtube.com/v/lgZBsWGaQY0&feature

预期网址

http://www.youtube.com/embed/lgZBsWGaQY0?autoplay=1

【讨论】：

是的，应该使用嵌入式版本而不是直接网址
你能解释一下为什么这个简单的技巧会有所作为吗？:)
对不同的视频进行了尝试。虽然我自己的 YT 视频允许嵌入，但我得到与 OP 相同的错误。尝试了所有可以想象的链接格式。解决办法是省略https的s

【解决方案2】：

在将 YouTube 网址插入 iframe 之前，必须对其进行清理和规范化。这是我创建的用于清理和规范 YouTube url 的 Common js 兼容库。

var getVidId = function(url)
{
    var vidId;
    if(url.indexOf("youtube.com/watch?v=") !== -1)//https://m.youtube.com/watch?v=e3S9KINoH2M
    {
        vidId = url.substr(url.indexOf("youtube.com/watch?v=") + 20);
    }
    else if(url.indexOf("youtube.com/watch/?v=") !== -1)//https://m.youtube.com/watch/?v=e3S9KINoH2M
    {
        vidId = url.substr(url.indexOf("youtube.com/watch/?v=") + 21);
    }
    else if(url.indexOf("youtu.be") !== -1)
    {
        vidId = url.substr(url.indexOf("youtu.be") + 9);
    }
    else if(url.indexOf("www.youtube.com/embed/") !== -1)
    {
        vidId = url.substr(url.indexOf("www.youtube.com/embed/") + 22);
    }
    else if(url.indexOf("?v=") !== -1)// http://m.youtube.com/?v=tbBTNCfe1Bc
    {
        vidId = url.substr(url.indexOf("?v=")+3, 11);
    }
    else
    {
        console.warn("YouTubeUrlNormalize getVidId not a youTube Video: "+url);
        vidId = null;
    }

    if(vidId.indexOf("&") !== -1)
    {
        vidId = vidId.substr(0, vidId.indexOf("&") );
    }
    return vidId;
};

var YouTubeUrlNormalize = function(url)
{
    var rtn = url;
    if(url)
    {
        var vidId = getVidId(url);
        if(vidId)
        {
            rtn = "https://www.youtube.com/embed/"+vidId;
        }
        else
        {
            rtn = url;
        }
    }

    return rtn;
};

YouTubeUrlNormalize.getThumbnail = function(url, num)
{
    var rtn, vidId = getVidId(url);
    if(vidId)
    {
        if(!isNaN(num) && num <= 4 && num >= 0)
        {
            rtn = "http://img.youtube.com/vi/"+vidId+"/"+num+".jpg";
        }
        else
        {
            rtn = "http://img.youtube.com/vi/"+getVidId(url)+"/default.jpg";
        }
    }
    else
    {
        return null;
    }
    return rtn;
};

YouTubeUrlNormalize.getFullImage = function(url)
{
    var vidId = getVidId(url);
    if(vidId)
    {
        return "http://img.youtube.com/vi/"+vidId+"/0.jpg";
    }
    else
    {
        return null;
    }
};

if ( typeof exports !== "undefined" ) {
    module.exports = YouTubeUrlNormalize;
}
else if ( typeof define === "function" ) {
    define( function () {
        return YouTubeUrlNormalize;
    } );
}
else {
    window.YouTubeUrlNormalize = YouTubeUrlNormalize;
}

已更新以适应 YouTube 移动网址。即：m.youtube.com 更新以获取图像，并防止 url 中的 GET 变量

【讨论】：

【解决方案3】：

这些步骤将使您了解它是如何完成的：

使用 youtube 网站查找您想要的视频
点击视频下方的“分享”按钮
点击他们显示给您的链接旁边的“嵌入”按钮
复制给定的 iframe 代码并将其粘贴到您网站的 html 中页面。

您可以在这里很好地看到该网址是由 /embed 生成的，它与第一个答案一起使用。

【讨论】：