Full screen does not work on a Youtube embedded video on my site when using chrome

Question

On my website, I embedded a Youtube video with this simple code:

<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/

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.

However, when I use Explorer or Firefox, full screen works just fine. So obviously I'm doing something wrong. Any help would be appreciated.

Answer 1

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.

Answer 2

try to remove

="allowfullscreen"

so past this one

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

Answer 3

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.

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?

---

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.