search

joaopereirawd / animatedModal.js

animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions.
MIT License
962 stars 207 forks source link

Fullscreen for embedded Vimeo video not working in Chrome #48

Open ismaelw opened 7 years ago

ismaelw commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

jesserosenfield commented 5 years ago

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.