Animations do not work when HTML5 video element is on page, above animated elements

This is:

• Bug

Specifications

• AOS version: latest
• OS: windows
• Browser: firefox

Expected Behavior

Elements should animate regardless of other elements present on page.

Actual Behavior

Animations do not work when HTML5 video element is on page, above animated elements

Steps to Reproduce the Problem

1. Here is my video code. You can live edit/add it to the main AOS page (https://michalsnik.github.io/aos/) as a test.

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

1. If you place that video element near the top, the subsequent animated items will not animate.
2. If you place that video at the bottom of the page, the animated items above it will animate.

Detailed Description

Possible Solution

[colepacak]

I ran into the same problem in safari - particularly mobile safari - and this helped me:

AOS.init();

window.addEventListener('load', function() {
  AOS.refresh();
});

[Foulks-Plb]

The problem is solved for me: I do: AOS.refresh(); when video is ready with event…