Поставил видио как фон
Оно должно включаться автоматически при переходе на страницу. Если смотреть с компьютера, то оно включается (даже если телефонный вариант через инспектор кода), а когда заходишь на сайт с самого телефона то оно не грузит и показывает значок включить видео.
Код для разной ширины разный.
<div class="fullscreen-bg">
<div class="overlay">
<div class="container">
<br>
<nav class="navbar__desktop navbar navbar-expand-md navbar-dark ">
<br><br><br>
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-item nav-link" href="#"><span class="navbar__link">Музыка</span></a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#"><span class="navbar__link">Клип</span></a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="navbar-brand mx-auto" href="#"><img src="{% static 'main/img/logo.png' %}"
class="logo__navbar"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-item nav-link" href="#"><span class="navbar__link">Соц Сети</span></a>
</li>
<li class="nav-item">
<a class="nav-item nav-link" href="#"><span class="navbar__link">Контакты</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<video loop="" muted="" autoplay="" poster="video/plane.jpg" class="fullscreen-bg__video">
<source class="vidio__section" src="{% static 'main/img/vd.mov' %}">
</video>
</div>
<div class="phone__video">
<div class="fullscreen-bg">
<div class="overlay">
<div class="container">
<nav class="navbar__phone navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="{% static 'main/img/logo.png' %}"
class="logo__navbar"></a>
<button class="navbar__icon navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class=" navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#"><span class="navbar__link">Концерты</span><span
class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#"><span class="navbar__link">Клип</span></a>
<a class="nav-item nav-link disabled" href="#"><span
class="navbar__link">Соц сети</span></a>
<a class="nav-item nav-link disabled" href="#"><span
class="navbar__link">Контакты</span></a>
</div>
</div>
</nav>
<br>
</div>
</div>
<video loop="" muted="" autoplay="" poster="video/plane.jpg" class="fullscreen-bg__video">
<source class="vidio__section" src="{% static 'main/img/vp.mov' %}">
</video>
</div>
</div>
.phone__video {
display: none;
}
.fullscreen-bg {
overflow: hidden;
z-index: -100;
height: 100%;
width: 100%;
padding-top:45%;
}
.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: 700px;
z-index: 4;
}
Простой
