YouTube iframe嵌入 - 全屏

Question

我有一个iframed到网页的表单.完成表单后,将使用iframe嵌入显示YouTube视频.

当我进入YouTube视频的全屏模式时,没有任何事情发生.

嵌套iframe的全屏是否受父iframe尺寸的约束？

Answer 1

如果我理解正确,你有一个iframe包含第二个iframe(youtube one).
尝试将该allowfullscreen属性添加到"父"iframe.

要获得完整的浏览器支持,它应如下所示:

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> </iframe> 

Answer 2

React.JS人,记得allowFullScreen和frameBorder="0"

没有驼峰的情况下,反应剥离这些标签!

Answer 3

添加allowfullscreen="allowfullscreen"和更改YouTube嵌入类型修复了我的问题.

Answer 4

我必须将allowFullScreen属性添加到"父"iframe.属性的情况很重要.我不认为Firefox或Edge/IE11具有浏览器特定的allowFullScreen属性.所以它看起来像这样:

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>

Answer 5

将 allowfullscreen 放在 iframe 标签中而不将其设置为 true 已被弃用。此问题的更新答案是全屏不适用于嵌入式 YouTube 视频，是在标签内将 allowfullscreen 设置为 true：

<iframe 
   id="player" 
   src="URL here" 
   allowfullscreen="true">
</iframe>

经过测试并适用于所有浏览器，没有问题。

Answer 6

在HTML5中,只需使用:

<iframe src="https://www.youtube.com/embed/ID" allowfullscreen /> 

true如果允许通过调用Element.requestFullscreen()方法将帧置于全屏模式,则可以将此属性设置为.如果未设置,则无法将元素置于全屏模式.请参阅Mozilla文档

在React.js框架中使用property allowFullScreen.

请注意,有更多的答案指向不同的方向,所以希望这篇文章能够统一并简化所有提到的最新有效方法.

Answer 7

使用以下简单代码实现此目的的最佳解决方案和最简单方法：

<iframe id="player" src="URL" allowfullscreen></iframe>

经过测试并适用于所有浏览器，没有问题。

谢谢