12

我正在尝试使用以下代码嵌入 YouTube 视频：

<iframe width="425" height="319" frameborder="0" wmode="Opaque"allowfullscreen=""
      src="http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent">
</iframe>

虽然它工作正常，但它在控制台中给出了这个错误：

Chrome 版本 22.0.1229.94：

不安全的 JavaScript 尝试从 URL http://www.youtube.com/embed/8vJwFvFi4ZY?wmode=transparent的框架访问具有 URL http://example.com/
的框架。 域、协议和端口必须匹配。

火狐 17.0 版：

错误：访问属性“toString”的权限被拒绝

我四处搜索，但我发现这可能是 YouTube 的问题，他们应该解决它，

问题是：我怎样才能摆脱这个错误？（无论如何，甚至通过压制它。）

4

5 回答 5

13

你无法阻止它，至少我所知道的任何方式都无法阻止（我已经尝试了很多）。iframe 目标中有一个脚本试图访问您的文档，可能正在寻找它可以调用以启用 API 的全局函数。

另一件事是，即使使用他们自己的iframe API ，错误仍然存​​在：http : //jsbin.com/izabed/1/edit

这没有什么害处，您的视频可以正常工作。但如果你在控制台中运行它，它看起来有点大胆。他们可能应该将此作为参数包含在内，起初我认为这是origin参数的想法，但它没有任何区别。

还值得注意的是，他们自己的演示显示相同的错误（和其他错误）。此外，如果您使用embed标签而不是 iframe，它不会显示任何错误。

所以你可以做这样的事情来防止大多数桌面浏览器中的错误：

if(haveflash) {
    // use <embed>
} else {
    // use iframe
}

更新

大多数浏览器不再支持 Flash，Adobe 也不支持。不幸的是，这意味着使用<embed>不再是一个可行的选择。

于 2012-11-29T14:28:35.683 回答
2

将讨论从评论转移到这个答案。简而言之，问题是不允许跨域 JS 对象访问，在您的情况下，youtube.com 上的脚本正试图对父页面执行此操作。

如果您只想显示 youtube 视频，则可以改用<embed>标签。

于 2012-11-29T14:23:49.017 回答
2

只需添加?html5=1以防止此错误。（切换到 HTML5 播放器）

于 2015-01-20T08:00:11.183 回答
0

它是什么浏览器？当我尝试在此页面中使用 Firefox 中的 JavaScript 附加 iframe 时，不会出现错误/警告。

于 2012-11-29T12:03:05.817 回答
0

既然只能使用 CSS，为什么还要使用 Javascript？它每次都有效。您甚至可以将任何视频合并到响应式滑块中。

或者只是访问：http ://embedresponsively.com/

<style>
.embed-container 
{ 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed 
{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}
</style>

<div class='embed-container'>

<iframe src='https://www.youtube.com/watch?v=tntOCGkgt98' frameborder='0' allowfullscreen>
</iframe>
</div>
于 2016-09-28T02:44:35.097 回答