1
Я запускаю фоновое видео, когда посетители входят на целевую страницу. Когда вы прокручиваете страницу вниз, видео остается на месте, но я хотел бы изменить это, чтобы видео также прокручивалось. Я не знаю, как это сделать.Получение фонового изображения для прокрутки
Вот мой CSS:
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url() no-repeat;
background-size: cover;
}
.video-container {
min-height: 100vh;
}
.video-container-bg {
padding-top: 45vh;
color: #fff;
}
А вот HTML, который использует его:
<div class="video-container">
<div class="video-container-bg">
<video playsinline autoplay muted loop poster="{{page.image.url}}" id="bgvid">
<source src="{{page.video.url}}" type="video/mp4">
</video>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="animation-element bounce-up">
<h1 class="page-title">{{page.page_title}}</h1>
<p class="strapeline">{{page.strapline}}</p>
<a class="butt" href="#about-us">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
Проблема с этим - следующий div больше не сидит поверх него, что он должен сделать – HenryM
вы можете вкратце объяснить – Gowtham
В разделе 'div class =" container "есть текст и ссылки в нем, и он должен сидеть сложа руки видео. Когда я меняю позицию на относительную, она просто сдвигает этот раздел под видео. – HenryM