Можно ли создать фоновое видео на элементе div или span?

Question

Я хотел бы иметь фоновое видео на моем Div. HTML выглядит так

<div class="videoText">
  <video muted autoplay class="video">
            <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_2MB.mp4" type="video/mp4">
        </video>
  <span class="text">Hello World</span>
</div>

Заранее спасибо!

Answer 1

Просто нужно установить для него положение отпущения грехов и зафиксировать положение. Я исправил это для вас:

.videoText {
  position: relative
  height: 500px;
}

.videoText .video {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  z-index: 0
}
.videoText span {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
  color: #FFF;
  text-align: center;
  margin: 100px 0;
}

<div class="videoText">
    <video muted autoplay class="video">
        <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_2MB.mp4" type="video/mp4">
    </video>
    <span class="text">Hello World</span>
</div>

Answer 2

Вам необходимо установить абсолютную позицию видео, а его родительскую позицию относительно. Пожалуйста, посмотрите на фрагмент кода ниже. Это может помочь вам.

.videoText {
    position: relative;
    min-height: 450px;
}
.videoText span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 36px;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /*z-index: -1;*/
    /*opacity: .15;*/
    overflow: hidden;
}
.bg-video__content {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

<div class="videoText">
<div class="bg-video">
    <video class="bg-video__content" autoplay="" muted="" loop="">
        <source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/720/Big_Buck_Bunny_720_10s_2MB.mp4" type="video/mp4">        
        Your browser is not supported!
    </video>
</div>
<span class="text">Hello World</span>
</div>