由X-Frame-Options拒绝载入：http：//www.youtube.com/v/g5RM5StrMXY不允许跨越原始帧

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

页面加载后，我得到以下错误。

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

由于这个错误，YouTubevideo无法在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> 

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

Answer 1

查询中的原始url

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

预期的url

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

Answer 2

在将url插入iframe之前，必须先清理并归一化。 这是我为了清理和规范化YouTube网站而创build的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移动url。 即：m.youtube.com更新以获取图像，并防止在URL中的GETvariables

Answer 3

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

1. 使用YouTube网站find您想要的video
2. 点击video下方的“分享”button
3. 点击他们展示的链接旁边的“embedded”button
4. 复制给定的iframe代码并将其粘贴到您网页的html中。

您可以在这里看到，该url是由/ embed生成的，与第一个ansewer一起使用。