Animate on Scroll (AOS) animations do not work when HTML5 video element is on page

I have an HTML5 video element on my page, and my animations are not working. They work on every other page of the website. Here is my video code:

<div class="video-wrapper">
    <div class="video">
       <video poster="/images/video.png" autoplay="" loop="" muted="" playsinline="">
           <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
       </video>
    </div>
</div>

That video element is at the top of the page, above any animated items. When I move the video underneath the animated items (to the footer), remove the video altogether, or “live edit” it out using the firefox dev console, the animations start working again.

I also live edited it into the AOS page (https://michalsnik.github.io/aos/) and it broke the animations there as well. The animations worked when I moved the video to the bottom of that page as well.

Is this a known compatibility issue with HTML5 video and AOS? Any way to fix the problem?

Answer

I was able to “fix” the issue by giving the video element an absolute position, and then adding a 1600x900px transparent PNG in the same parent div to “stretch” the entire parent container to the height of the 16×9 video.

Leave a Reply

Your email address will not be published. Required fields are marked *