javascript 使用 chrome 时，全屏无法在我网站上的 Youtube 嵌入视频上运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23402376/
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
Full screen does not work on a Youtube embedded video on my site when using chrome
提问by user3591728
On my website, I embedded a Youtube video with this simple code:
在我的网站上，我用这个简单的代码嵌入了一个 Youtube 视频：
<iframe src="//www.youtube.com/embed/bpqTiwfzqdo" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
The results is the video that is at the bottom of the page here: http://www.rpginsider.com/child-of-light-releases/
结果是位于页面底部的视频：http: //www.rpginsider.com/child-of-light-releases/
When in Chrome and I press the full screen button on that video, the video does not go full screen. Instead my whole browser goes full screen (as if I pressed F11) but not the video.
当我在 Chrome 中按下该视频的全屏按钮时，视频不会全屏显示。相反，我的整个浏览器全屏显示（就像我按下 F11 一样）但不是视频。
However, when I use Explorer or Firefox, full screen works just fine. So obviously I'm doing something wrong. Any help would be appreciated.
但是，当我使用资源管理器或 Firefox 时，全屏工作正常。所以很明显我做错了什么。任何帮助，将不胜感激。
回答by Setyl
This issue can be caused by CSS Animations. If any of the iframe's ancestor elements is animated by CSS3 Animations with an (-webkit-)animation-fill-mode property set to "forwards" or "both", the video isn't set to fullscreen on Chrome.
此问题可能是由 CSS 动画引起的。如果 iframe 的任何祖先元素由 CSS3 Animations 设置动画，并将 (-webkit-)animation-fill-mode 属性设置为“forwards”或“both”，则视频不会在 Chrome 上设置为全屏。
回答by Faxsy
try to remove
尝试删除
="allowfullscreen"
so past this one
所以过了这个
<iframe width="640" height="360" src="//www.youtube.com/embed/bpqTiwfzqdo" frameborder="0" allowfullscreen></iframe>
回答by Stephen Brown
This is not exactly what is happening with my embed, fullscreen works fine in IE and Firefox but the video is being pulled up and to the left in Chrome because I have transform translate styling applied to the iframe which is affecting the video in fullscreen mode, but at the same time I also have a position absolute applied to the iframe with a top of 50% which is not affecting the iframe in fullscreen mode.
这并不是我的嵌入所发生的情况，全屏在 IE 和 Firefox 中工作正常，但视频在 Chrome 中被拉起并移至左侧，因为我已将转换翻译样式应用于 iframe，这影响了全屏模式下的视频，但同时我也有一个绝对位置应用于 iframe，顶部为 50%，这不会影响全屏模式下的 iframe。
I'm going to listen for fullscreen changes on the iframe and remove the translate css on the iframe and add it back when going back to normal. How can I detect when an iFrame goes fullscreen?
我将监听 iframe 上的全屏更改并删除 iframe 上的翻译 css，并在恢复正常时将其添加回来。如何检测 iFrame 何时全屏显示？
World's not perfect, the fullscreen api is not playing well with me. Scraping that idea, removing the translate css altogether and going back to negative top and left margins half the iframe's dimensions. Fullscreen works fine in chrome that way.
世界并不完美，全屏 api 不适合我。摒弃这个想法，完全删除翻译 css 并返回到 iframe 尺寸一半的负上边距和左边距。全屏在 chrome 中工作正常。
回答by BerkayKucuk
Found a solution. I had the same issue.
找到了解决办法。我遇到过同样的问题。
<div class="blog-post blog-large fadeInLeft">
My youtube iframe was in a card and that card had an css animation. Deleting that animation (fadeInLeft) solved the problem completely.
我的 youtube iframe 在一张卡片中，那张卡片有一个 css 动画。删除那个动画（fadeInLeft）完全解决了这个问题。
回答by Rakesh Vadnal
Try this with css:
用 css 试试这个：
embed,
iframe,
object {
max-width: 100%!important;
max-height: 100%!important;
}
