使用Chrome浏览器时,全屏无法在我网站上的Youtube嵌入式视频上工作

9o685dep  于 2023-04-27  发布在  Go
关注(0)|答案(7)|浏览(207)

在我的网站上,我用这个简单的代码嵌入了一个Youtube视频:

<iframe src="//www.youtube.com/embed/bpqTiwfzqdo" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

结果是在页面底部的视频在这里:http://www.rpginsider.com/child-of-light-releases/
当我在Chrome中按下视频的全屏按钮时,视频不会全屏显示。相反,我的整个浏览器会全屏显示(就像我按了F11一样),但视频不会。
然而,当我使用资源管理器或火狐浏览器,全屏工作正常。所以很明显,我做错了什么。任何帮助将不胜感激。

rlcwz9us

rlcwz9us1#

此问题可能是由CSS Animations引起的。如果任何iframe的祖先元素由CSS3 Animations设置动画,并且(-webkit-)animation-fill-mode属性设置为“forwards”或“both”,则该视频在Chrome上不会设置为全屏。

yjghlzjz

yjghlzjz2#

设法除去

="allowfullscreen"

所以过了这一关

<iframe width="640" height="360" src="//www.youtube.com/embed/bpqTiwfzqdo" frameborder="0" allowfullscreen></iframe>
rqcrx0a6

rqcrx0a63#

这不完全是我的嵌入发生的事情,全屏在IE和Firefox中工作正常,但视频在Chrome中被拉到左边,因为我对iframe应用了transform translate样式,这会影响全屏模式下的视频,但同时我也对iframe应用了一个绝对位置,顶部为50%,这不会影响全屏模式下的iframe。
我将监听iframe上的全屏更改,并删除iframe上的翻译css,并在恢复正常时将其添加回来。How can I detect when an iFrame goes fullscreen?
世界并不完美,全屏API对我来说并不好,放弃这个想法,完全删除翻译css,回到iframe一半大小的负上边距和左页边距,这样全屏在chrome中工作得很好。

cbeh67ev

cbeh67ev4#

找到了解决办法。我也有同样的问题。

<div class="blog-post blog-large fadeInLeft">

我的youtube iframe在一张卡片里,那张卡片有一个css动画。删除那个动画(fadeInLeft)完全解决了这个问题。

pkmbmrz7

pkmbmrz75#

用css试试:

embed,
iframe,
object {
max-width: 100%!important;
    max-height: 100%!important;
}
s8vozzvw

s8vozzvw6#

这可能会对某些人有所帮助。我刚刚在2021年在Safari上遇到了完全相同的问题。Youtube iframe上的全屏按钮会使整个网页显示全屏而不是实际的视频。这个问题也与CSS动画应用于iframe的父元素有关,所以删除动画解决了这个问题。

jum4pzuy

jum4pzuy7#

不仅CSS动画会导致这种情况,对我来说,在祖先之一上使用clip-path时也会发生这种情况。

相关问题