Animations do not work when video element is on page

Created on 23 October 2018, about 6 years ago

Updated 2 October 2024, 3 months ago

Hello,

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?

🐛 Bug report

Status

Closed: won't fix

Version

1.0

Component

Miscellaneous

Created by

🇺🇸United States hockey2112

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment 3 months ago →
🇫🇷France dqd London | N.Y.C | Paris | Hamburg | Berlin
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.

... which indicates that this issue is better seated in the issue queue of Michal's aos github repository since this needs to be fixed in the original library. Drupal implementations of external libraries are not allowed to alter the original code. But thanks for the report to raise awareness. Feel free to ping the original developer of the library regarding this issue.

Apart from that: Closed because of no more activity and missing reaction of the original reporter to the questions raised in#5 and because of upcoming EOL of Drupal 7 in January 2025.

Thanks @ all!

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024