@ilyaatabekov
Python-Developer

Почему видео не включается на телефоне?

Поставил видио как фон
Оно должно включаться автоматически при переходе на страницу. Если смотреть с компьютера, то оно включается (даже если телефонный вариант через инспектор кода), а когда заходишь на сайт с самого телефона то оно не грузит и показывает значок включить видео.
Код для разной ширины разный.

<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;
}


VH2Z4.png
  • Вопрос задан
  • 52 просмотра
Пригласить эксперта
Ответы на вопрос 3
vabka
@vabka
Токсичный шарпист
Это особенность мобильных браузеров - они стараются экономить заряд батареи, а по тому и не запускают автоматически откровенно ненужные видеоукрашательства.
Ответ написан
noder_ss
@noder_ss
Человек хороший, вёрстка по душе
Запрещено правилами гугла
Ответ написан
Комментировать
@AlexProWeb
я думаю надо попробовать искать ответ на вопрос через js чтобы при загрузки js срабатывал и вызывал событие и запускал видео
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы