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?
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.