Мне нужно сверстать верхний div, который состоит только из фонового видео (и блоком иконок, наложенных с помощью position: absolute). Я смог выбрать ту область видео, которая должна быть на экране, и спозиционировать её.
<div class="video-container">
<video playsinline autoplay muted loop poster="img/kamado-charcoal-background.jpg" id="Charcoal_video"
class="fullscreen-bg__video" height="">
<source src="video/Charcoal_kamado.webm" type="video/webm">
<source src="video/Charcoal-kamado.mp4" type="video/mp4">
Добро пожаловать
</video>
</div>
.video-container {
max-width: 100%
max-height: 100%
}
#Charcoal_video {
position: relative;
z-index: -100;
left: 50%;
transform: translate(-50%, -24%);
}
Всё должно выглядеть, как на скриншоте -
https://yadi.sk/i/qVrKnfBs1Y8IRQ
Но, очевидно видео не обрезается. Я убрал горизонтальную прокрутку с помощью oferflow: hidden у родительского элемента, хотя подозреваю, что это не решение проблемы.
Но главный вопрос: почему-то видео не реагирует на задание параметров top, height, ограничивающих высоту, захватывает больше места, чем область экрана. Плюс снизу добавляется пустое место, что мешает следующим элементам после него. Как мне привести видео к виду со скриншота, при этом с ограниченными размерами строго на область экрана, и чтобы следующие блоки шли сразу под ним?
Простой
