iframe中是否需要宽度/高度?

时间:2013-06-08 16:57:30

标签: html css iframe

我与一个我认识的人进行了长时间的讨论。 他坚持使用iframe将YouTube视频嵌入:

<iframe style=”width: 560px; height: 315px; border: none;” src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>

适用于某些视频但不适用于所有视频。

Youtube提供以下嵌入代码:

<iframe src="http://www.youtube.com/embed/bla-bla-bla?rel=0" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

显然工作正常。

如果需要iframewidth,我试图在height的规范中找到。如果没有提供它们会发生什么。但无法找到相关信息。

有人可以帮助我并解释为什么第一个变体总是不起作用,据我所知,其中一个变体对于第二个变体更好吗?

EDIT1:

所以正确答案如下。我只想评论我是如何得到那些错误的卷曲符号。一个基于WordPress的站点的准则为用户提供了这些代码片段。那个特定的网站(或者它的css;或者一般的wordpress)不区分卷曲和直引号,总是显示卷曲。那么当用户复制粘贴代码时 - 它不起作用。

2 个答案:

答案 0 :(得分:2)

根据我们在评论中的讨论,问题是由第一个示例中的引号引起的:

<iframe style=”width: 560px; height: 315px; border: none;”
    src=”http://www.youtube.com/embed/bla-bla-bla?rel=0″></iframe>

更改为直引号修复了它:

<iframe style="width: 560px; height: 315px; border: none;"
    src="http://www.youtube.com/embed/bla-bla-bla?rel=0"></iframe>

使用W3C Validation Service验证HTML非常有用。这会抓住这个错误和许多其他错误。

答案 1 :(得分:1)

我的猜测是youtube使用window.frameElement

访问height和width属性

https://developer.mozilla.org/en-US/docs/Web/API/window.frameElement

他们可能会这样做以调整视频质量等。

如果使用css设置宽度和高度,则不会出现这些内容,并且可能会在代码中遇到错误而不显示视频。

所以答案是,没有那些属性不被要求,但是在这种情况下它们似乎是。

我只能告诉你,如果你有一个例子。