html – Is it possible to create a background video on a div or span element?-ThrowExceptions

Exception or error:

I’d like to have background video on my div. The HTML looks like this

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

Thank you in advance!

How to solve:

Just need to set absolution position for it and fix the position. I’ve fixed that for you:

.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>

###

You need to set video position as absolute and its parent position is relative. Please take a look at code snippet below. It may help you.

.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>

Leave a Reply

Your email address will not be published. Required fields are marked *