Видео тег на iOS не работает должным образом, видео скрывает другие элементы - PullRequest
Новая
       12

Видео тег на iOS не работает должным образом, видео скрывает другие элементы

0 голосов
/ 13 марта 2020

Newb ie для веб-разработки. Я пытаюсь сделать баннер с видео фоном и наложением текста на видео. Он отлично работает в Safari (macOS), Chrome (macOS) и Chrome (Android), но видео будет скрывать весь текст при использовании Safari (iPhone) и Chrome (iPhone) * отлично работает на iPad, хотя *. Кто-нибудь имеет представление о том, что не так с моим кодом? Спасибо 

<div class="container-fluid landing-banner">
   <div class="row banner-video-container">
       <video autoplay muted loop id="banner-video">
         <source src="https://mywebsite.com/video.mp4" type="video/mp4">
       </video>
       <h1>H1 text here</h1>
       <h2>H2 text here</h2>
       <a href="https://mywebsite.com/getstarted"><button class="btn-main">Get Started</button></a>
   </div>
</div>

.. 

div.landing-banner {
    position: relative;
    height: 600px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

div.banner-video-container {
    height: 600px;
    width: auto;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

#banner-video {
    position: absolute;
    object-fit: cover;
}

.banner-video-container h1, .banner-video-container h2, .banner-video-container a {
    z-index: 1;
}

1 Ответ

0 голосов
/ 19 марта 2020

Я думаю, что вы хотите, чтобы ваше видео воспроизводилось на веб-странице как «встроенное».

Попробуйте добавить атрибут playsinline: 

<div class="container-fluid landing-banner">
   <div class="row banner-video-container">
       <video autoplay muted loop id="banner-video" playsinline>
         <source src="https://mywebsite.com/video.mp4" type="video/mp4">
       </video>
       <h1>H1 text here</h1>
       <h2>H2 text here</h2>
       <a href="https://mywebsite.com/getstarted"><button class="btn-main">Get Started</button></a>
   </div>
</div>

Это должно держать видео встроенным на странице. Подробнее о iOS HTML5 для видео здесь:

...