Я искал в стеке, но не могу найти решение, которое работает.Мой веб-сайт имеет два эффекта параллакса на двух разных видео внутри двух отдельных div'ов.Первый работает нормально.
Как выглядят первые HTML
<div class = "divVideo">
<video autoplay muted loop class="Video">
<source src="Videos/Walk.mp4" type="video/mp4">
Your Browser does not support Video Element.
</video>
</div>
CSS:
.divVideo{
height: 100%;
width: 100%;
}
.Video {
position: fixed;
z-index: -100;
background-size: cover;
transition: 1s opacity;
}
Второй имеет похожий HTML-код, я использую те же атрибуты CSS, и он не работает.Это просто показывает предыдущее видео в параллаксе в том 2-м делении.
Я также пытался изменить position to relative
, но это просто удаляет параллакс и показывает видео, которое я хочу, как обычно (как и должно быть).
Также, когда я удаляю код CSS для моего второго видео div и просто получаю:
.divVideo2 {
height: 400px;
width: 100%;
}
Вот CSS для второго видео
.Video2 {
position: fixed;
z-index: -100;
background-size: cover;
transition: 1s opacity;
}
его ничего не делаетдо 2-го класса видео, пока я не применю атрибуты CSS.Он просто отображает фактический размер видео.