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

[hockey2112]

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>

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

Detailed Description

Possible Solution

[hockey2112]

On further inspection and testing, it appears that the animations DO indeed work, but they are triggering too early... I assume because of the full width and result tall height of the video. How can we make sure that AOS takes into account the height of the video element in regards to when animations are being triggered?

[hockey2112]

aaaaand upon even further inspection, it appears that the issue only occurs when the video element is contained within a parent div. If the video element is just floating in the code (essentially a child of the

element), then the animations run as expected. Still seems like a buggy sort of thing though... why shouldn't it work while contained in a div? Any fix?

Here is a fiddle. To see the animations work, remove the

wrapper from acount the video element: https://jsfiddle.net/x4t1gb9L/

[hockey2112]

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 div to "stretch" the entire parent container.

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