wow.js + animate.css + Vimeo Fullscreen issue

[meta4creations]

Full screen Vimeo videos get hidden behind the site (or hidden somewhere) when wow.js is active and used with animate.css

Granted this could also stem from a combination of these 2 things plus my theme (I have yet to figure out what is happening with my testing), but if I disable either wow.js or animate.css the issue goes away.

[jcsrb]

could you provide a sample page ? codepen.io or whatever editor you like

[boshevski]

We had the same problem at Storj.io and fixed it by removing the wow animation class on the Vimeo wrapper. https://github.com/Storj/storj.io/commit/e0e73745b4915186014f156d2915bc115018066f

[kaiquegarcia]

Hi, I have the same issue with YouTube fullscreen iframe and I know what's doing this bug but I don't know how to fix it. Well, when we apply this CSS animation property to iframe or some parent:

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

we are telling our browser that our element will be visible after the pageload, right? When we put the both value it should mean before and after. But when we call the fullscreen mode our browser will detect if it is visible after only, there's no option to before and after or before only. So I think this is a browser bug. I checked it on Chrome v44.0.2403.155 32bits. Can anybody help me?

[alexandruspataru]

I had the same issue and it seems that if I'll remove the animation for the video container, it'll be ok. Well, you know, it's better to be unable to animate the video than to be unable to animate at all...

[guptanuj]

Hi Everyone, I have a solution for it you may add this code in js this will remove animated class. when one time animation has done.

$('.wow').each(function(){ $(this). one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () { $(this).removeClass('wow, animated'); }); });

[Maculotti]

Hi everyone, I had the same problem too. I fixed this in plain css:

html body .bugfix-fullscreen.animated{
  animation-fill-mode: backwards;
}

just add the class ".bugfix-fullscreen" at each element that contains an iframe an have the class .animated

[dkllr]

The problem is not Youtube or Vimeo specific, it generally appears on all iframes using fullscreen mode.

Global fix:

.wow {
    animation-fill-mode: backwards !important;
}