Html YouTube iframe 嵌入 - 全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27723423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
YouTube iframe embed - full screen
提问by CdB
I have a form that is iframed into a web page. Upon completion of the form, a YouTube video is displayed from using iframe embed.
我有一个嵌入网页的表单。完成表单后，将使用 iframe 嵌入显示 YouTube 视频。
When I enter full screen mode of the YouTube video, nothing really happens.
当我进入 YouTube 视频的全屏模式时，什么也没有发生。
Is the fullscreen of the nested iframe constrained by the dimensions of the parent iframe?
嵌套 iframe 的全屏是否受父 iframe 的尺寸限制？
采纳答案by Funkodebat
Adding allowfullscreen="allowfullscreen"and altering the type of YouTube embed fixed my issue.
添加allowfullscreen="allowfullscreen"和更改 YouTube 嵌入的类型解决了我的问题。
回答by CdB
If I understand correctly you have an iframe that contains a second iframe (the youtube one).
Try adding the allowfullscreenattribute to the "parent" iframe.
如果我理解正确，你有一个包含第二个 iframe（youtube 的）的 iframe。
尝试将allowfullscreen属性添加到“父”iframe。
For full browser support it should look like this:
对于完整的浏览器支持，它应该如下所示：
<iframe src="your_page_url"
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"> </iframe>
回答by Funkodebat
React.JS People, remember allowFullScreenand frameBorder="0"
React.JS 人，请记住allowFullScreen并frameBorder="0"
Without camel-case, react strips these tags out!
如果没有驼峰式样例，react 会去掉这些标签！
回答by Matt Goo
I had to add allowFullScreen attribute to the "parent" iframe. The case of the attribute does matter. I don't think Firefox or Edge/IE11 has a browser specific allowFullScreen attribute. So it looks something like this:
我不得不将 allowFullScreen 属性添加到“父”iframe。属性的大小写很重要。我认为 Firefox 或 Edge/IE11 没有浏览器特定的 allowFullScreen 属性。所以它看起来像这样：
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
回答by Jurosh
In HTML5, simply use:
在 HTML5 中，只需使用：
<iframe src="https://www.youtube.com/embed/ID" allowfullscreen />
This attribute can be set to trueif the frame is allowed to be placed into full-screen mode by calling it's Element.requestFullscreen()method. If this isn't set, the element can't be placed into full-screen mode. See Mozilla Docs
true如果通过调用它的Element.requestFullscreen()方法允许将框架置于全屏模式，则可以将此属性设置为。如果未设置，则无法将元素置于全屏模式。查看Mozilla 文档
In React.js frameworkuse property allowFullScreen.
在React.js 框架中使用 property allowFullScreen。
Note that there are more answers pointing to different directions, so hope this post will unite and simplify all mentioned with latest valid approach.
请注意，有更多的答案指向不同的方向，所以希望这篇文章能够统一和简化所有提到的最新有效方法。
回答by Jeanne vie
Putting allowfullscreen inside iframe tag without setting it to true is already deprecated. The updated answer for this issue which is fullscreen is not available with embedded YouTube videos is to set allowfullscreen to true inside tag:
将 allowfullscreen 放在 iframe 标签中而不将其设置为 true 已被弃用。此问题的更新答案是全屏不适用于嵌入式 YouTube 视频，是在标签内将 allowfullscreen 设置为 true：
<iframe
id="player"
src="URL here"
allowfullscreen="true">
</iframe>
Tested and working for all browsers without issues.
经过测试并适用于所有浏览器，没有问题。
回答by Jodyshop
The best solutionand the easiest one to achieve this by using this simple code:
使用以下简单代码实现此目的的最佳解决方案和最简单方法：
<iframe id="player" src="URL" allowfullscreen></iframe>
Tested and working for all browsers without issues.
经过测试并适用于所有浏览器，没有问题。
Thank you
谢谢
回答by Jason Silver
I found a solution that worked for me on this page thanks to someone named @orangecoat-ciallella
感谢名为@orangecoat-ciallella 的人，我在此页面上找到了一个对我有用的解决方案
https://www.drupal.org/node/1807158
https://www.drupal.org/node/1807158
The "full screen" button was not working in my Chrome browser on Ubuntu.
I was using the media_youtube module for D6. In the iframe it was using a video URL of the pattern //www.youtube.com/v/videoidhere.
I used the theme preprocessing function to make it output > //www.youtube.com/embed/videoidhere and it immediately started allowing the fullscreen button to work.
In short, try changing the /v/ to /embed/ in the YouTube URL if you're having a problem.
“全屏”按钮在 Ubuntu 上的 Chrome 浏览器中不起作用。
我在 D6 中使用 media_youtube 模块。在 iframe 中，它使用了模式 //www.youtube.com/v/videoidhere 的视频 URL。
我使用主题预处理功能使其输出> //www.youtube.com/embed/videoidhere，它立即开始允许全屏按钮工作。
简而言之，如果您遇到问题，请尝试将 YouTube URL 中的 /v/ 更改为 /embed/。
回答by zkytony
If adding allowfullscreendoes not help, make sure you don't have &fs=0in your iframe url.
如果添加allowfullscreen没有帮助，请确保您&fs=0的 iframe 网址中没有。
回答by Alan King
Inserting after the outer-most iframe from inside the nested iframe fixed the issue for me.
从嵌套的 iframe 内部在最外面的 iframe 之后插入为我解决了这个问题。
var outerFrame = parent.parent.parent.$('.mostOuterFrame');
parent.$('<iframe />', {
src: 'https://www.youtube.com/embed/BPlsqo2bk2M'
}).attr({'allowfullscreen':'allowfullscreen', 'frameborder':'0'
}).addClass('youtubeIframe')
.css({
'width':'675px',
'height':'390px',
'top':'100px',
'left':'280px',
'z-index':'100000',
'position':'absolute'
}).insertAfter(outerFrame);
