I'm having a really strange issue with vimeo & html5 fullscreen player.

I have this code in my template :

<iframe src="/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>

The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).

You can experiment this bug here :

Has anyone experienced this issue ?

Thanks a lot for your help !

I'm having a really strange issue with vimeo & html5 fullscreen player.

I have this code in my template :

<iframe src="http://player.vimeo./video/91593219/?autoplay=1" width="100%" height="615" frameborder="0" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>

The iframe loads fine, but when I click "fullscreen", the browser goes in fullscreen mode with the video appearing UNDER the site (I have relative and absolute divs visible while watching the video).

You can experiment this bug here : http://webrelais/pingpong/projet/proxipolis

Has anyone experienced this issue ?

Thanks a lot for your help !

• javascript
• html
• video
• vimeo
• vimeo-player

• I know this is an old thread but it would be useful on posts like this to specify which browsers this is an issue in. I had a site where this was an issue in Safari 12.0.1, however it was not an issue in Chrome 70.0.3538.77 – AdamJB Commented Nov 8, 2018 at 12:16

4 Answers 4

I solved the problem by disabling animate.css style on the element which included my iframe.

Nevertheless, I tried with z-index modifying, jQuery for changing styles but nothing worked, the only one solution was removing Animate CSS class.

Was the same bug in Safari (13.0.4). In my case parent div of an iframe had will-change property. Fullscreen works correct after I've removed it.

A quick look shows that it is related to CSS or Javascript for the element - since removing the id for that element makes fullscreen video work in Chrome at least.

Solve the problem by isolating CSS and Javascript that you use for that element and you should be able to find what causes it.

animation-fill-mode: both; in parent elements seems to cause this issue with fullscreen videos.