видео фон не отображается в Chrome

Question

это HTML в моем теле
этот код для видео, которое покрывает div с наложением сверху. Я мог бы использовать помощь, поскольку видео не появляется в Chrome. Я пытался использовать вебм. файл и огв, но это не работает. любая помощь приветствуется.

 <section>
<div class="jumbotron jumbotron-fluid" id="hero">
  <div class="container">

    <h3 class="hero-subtitle">Lorem Ipsum</h1>
    <p class="hero-content">The main content goes here </p>
        <br>
        <h6 class="hero-excerpt">subtitle </h6>
  </div>
</div>
</section>

css page

#hero {
min-height: 70vh;
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.85),
rgba(0, 0, 0, 0.45)
),
/* bottom, image */
url('background_video.mp4');

background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
.hero-subtitle {
font-size: 2rem;
font-weight: 300;
line-height: 1.2;
}
.hero-content{
font-size: 1.25rem;
font-weight: 300;
}
.hero-excerpt{
font-size: 1rem;
font-weight: 300;
}
}

Answer 1

url('background_video.mp4')

Вы не можете напрямую использовать видеофайл в качестве фонового изображения. Тип данных url css при использовании в стиле background устанавливается как свойство background-image. В качестве такого URL для этого свойства необходимо указать изображение, а не видеофайл.

Кросс-браузерное решение

Если вы хотите, чтобы ваше видео воспроизводилось как фон какого-либо элемента, вам нужно поместить его в контейнер с нужным вам содержимым. Наложите его на , поместив его с помощью position:absolute и установив соответствующие z-indexes :

.container {
  position:relative;
  width:320px;
  height:180px;
}

.container video {
  position:absolute;
  width:320px;
  height:180px;
  left:0px;
  top:0px;
  z-index:1;
}

.container .content {
  position:relative;
  width:320px;
  height:180px;
  z-index:2;
  background-color:rgba(0,0,0,0.7);
  color:white;
  line-height:180px;
  text-align:center;
}

<div class="container">
  <video autoplay muted src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
  <div class="content">Some content</div>
</div>

Только Firefox (по состоянию на июнь 2018 года)

В Firefox вы можете использовать другой элемент в качестве background-image, поэтому в этом случае вы можете использовать <video> элемент в качестве фона. Используйте функцию браузера с префиксом element () . Который при передаче css-идентификатора элемента будет использовать этот элемент в качестве фона

#content {
  width:320px;
  height:180px;
  background-image:-moz-element(#backgroundvideo);
  line-height:180px;
  text-align:center;
  color:white;
}

<video style="display:none;" autoplay muted id="backgroundvideo" src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"></video>
<div id="content">Some content</div>