<div class="fullscreen-bg" >
<video src="/video/file.mp4" controls autoplay loop class="fullscreen-bg__video">
</video>
</div>
.fullscreen-bg {
position: fixed;
background-color: #0f30b1;
top: -100px;
right: 0;
bottom: 0;
left: 0;
margin-top: -50px;
margin-bottom: -50px;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
max-width: 110%;
width: 110%;
height: 110%;
max-height: 110%;
}
@media screen and (min-width:100px) and (max-width:1024px) {
.fullscreen-bg {
position: fixed;
background-color: #0f30b1;
top: -100px;
right: 0;
bottom: 0;
left: 0;
margin-top: -50px;
margin-bottom: -50px;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
max-width: 110%;
width: 110%;
height: 110%;
max-height: 110%;
}
}
@media screen and (min-width:100px) and (max-width:768px) {
.fullscreen-bg {
position: fixed;
background-color: #0f30b1;
top: -100px;
right: 0;
bottom: 0;
left: 0;
margin-top: -50px;
margin-bottom: -50px;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
max-width: 110%;
width: 110%;
height: 110%;
max-height: 110%;
}
}
@media screen and (min-width:100px) and (max-width:600px) {
.fullscreen-bg {
position: fixed;
background-color: #0f30b1;
top: -100px;
right: 0;
bottom: 0;
left: 0;
margin-top: -50px;
margin-bottom: -50px;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
max-width: 110%;
width: 110%;
height: 110%;
max-height: 110%;
}
}
@media screen and (min-width:100px) and (max-width:480px) {
.fullscreen-bg {
position: fixed;
background-color: #0f30b1;
top: -100px;
right: 0;
bottom: 0;
left: 0;
margin-top: -50px;
margin-bottom: -50px;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
max-width: 110%;
width: 110%;
height: 110%;
max-height: 110%;
}
}
@media screen and (min-width:100px) and (max-width:320px) {
.fullscreen-bg {
position: fixed;
background-color: #0f30b1;
top: -100px;
right: 0;
bottom: 0;
left: 0;
margin-top: -50px;
margin-bottom: -50px;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
max-width: 110%;
width: 110%;
height: 110%;
max-height: 110%;
}
}
margin-top: -50px;
margin-bottom: -50px;
Данная вставка скрывает лишнее от проигрывателя
я один не понял к чему это?http://pb.cs-unreal.net/
пример как решить твою задачу.
как жене хватает размытия фона. жутко не хватает.
.navbar > .navbar__body > .navbar__body-menu{
display: flex;
flex-grow: 1;
list-style: none;
justify-content: center;
font-size: 18px;
}
.navbar > .navbar__body > .navbar__body-menu > li > a{
display: inline-block;
position: relative;
text-decoration: none;
color: black;
margin: 0 20px;
font-size: 20px;
border-radius: 20px;
transition: 0.3s;
}
.navbar > .navbar__body > .navbar__body-menu > li > a:before,
.navbar > .navbar__body > .navbar__body-menu > li > a:after{
display: block;
position: absolute;
content: "";
height: 2px;
width: 0;
background: #1B9CBF;
transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
left: 50%;
bottom: 0;
}
.navbar > .navbar__body > .navbar__body-menu > li > a:hover:before {
width: 50%;
left: 0;
}
.navbar > .navbar__body > .navbar__body-menu > li > a:hover:after {
width: 50%;
}