Fullscreen for embedded Vimeo video not working in Chrome

[ismaelw]

On my website I use this modal to show a video hosted on vimeo.

In every browser it works just fine. But in Google Chrome I don't get it to work. When I click the "fullscreen" button in the vimeo embedded video the whole page goes fullscreen but the video doesn't. In this fullscreen mode you can't do anything on the site. Scrolling and clicking does nothing.

My embedding code looks like this:

<iframe src="https://player.vimeo.com/video/XXXXXXXX?autoplay=1&amp;title=0&amp;byline=0" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

What can I do to fix this issue?

[falconshark]

This is the bug of animated.css on Chrome.
To fix this issue, you can try this workaround:

1. Add a custom class with value:

.full-screen-video{
   animation-fill-mode: none !important;
}

2. Add this class to your modal.

Reference:
http://stackoverflow.com/questions/32323499/full-screen-video-issue-when-using-animate-css-in-chrome

[LordMochito]

This solved the problem for me. thank you very much :)

[jesserosenfield]

also please keep in mind that if your iframe src is

src="//player.vimeo.com/..."

instead of

src="https://player.vimeo.com/..."

chrome will hide the full screen button.

Fancybox 3 does this and I had to update the plugin file to fix it.