При просмотре на ПК - нормально (+ когда уменьшаю до размеров телефона)
Но на телефоне уезжает видео вниз..
сайт<div class="fullscreen-bg">
<div class="overlay">
<h1>Фото на холсте <br>- идеальное решение для вас!</h1>
</div>
<video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
</div>
<style>
.fullscreen-bg {
margin-top: 50px;
overflow: hidden;
z-index: -100;
position: relative;
height: 100%;
width: 100%;
padding-top:30%;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.overlay {
background: rgba(0,0,0,0.6);
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
z-index: 4;
}
.overlay h1 {
text-align:center;
color:#fff;
margin-top: 12%;
}
@media (max-width: 767px) {
/*
.fullscreen-bg {
background: url('assets/images/fon.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
*/
.fullscreen-bg {
margin-top: 50px;
overflow: hidden;
z-index: -100;
position: relative;
height: 100%;
width: 100%;
padding-top:45%;
}
}
@media (max-width: 620px) {
.overlay h1 {
text-align:center;
color:#fff;
font-size: 22px;
margin-top: 20%;
}
}
</style>