Анимация анимации при прокрутке (AOS) не работает, когда элемент HTML5-видео находится на странице

Question

У меня есть HTML5-элемент видео на моей странице, и моя анимация не работает.Они работают на любой другой странице сайта.Вот мой код видео:

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

Этот элемент видео находится вверху страницы, над всеми анимированными элементами.Когда я перемещаю видео под анимированные элементы (в нижний колонтитул), удаляю видео целиком или «редактирую» его в реальном времени с помощью консоли разработчика Firefox, анимации снова начинают работать.

Я также редактировал его вживуюна страницу AOS (https://michalsnik.github.io/aos/), и там также были разбиты анимации. Анимации сработали, когда я также переместил видео в конец этой страницы.

Это известная проблема совместимости сHTML5 видео и AOS? Есть ли способ решить проблему?

Answer 1

Мне удалось «исправить» проблему, задав элемент видео абсолютной позиции, а затем добавив прозрачный PNG размером 1600x900 пикселей в том же родительском элементе div, чтобы «растянуть» весь родительский контейнер до высоты видео 16x9.