inoxe inoxe - 4 months ago 9
CSS Question

How to give a background video only to a particular div or class .

i.e i want to give a video in place of slider or banner images in front page of the website . In the below code i want to apply the video as a background only To 'video' class , how can i do it please help me out , thank you .

<body>
<div class="video">
<nav>
</nav>
<div class="some-text">
<h1> welcome </h1>
</div>
</div>

<div class="container">

<!-- here there other content of the site where the video should not appear in background -->

</div>

</body>

Answer

Try this

var myVideo = document.getElementById("vd");
myVideo.play(); 
.videoBg {
    overflow: hidden;
}

.videoBg video{
    min-width: 100%;
    min-height: 100%;
}

video{
  width:100%;
  height:100%;
}
<body>
    <div class="videoBg">
      <video id="vd">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> 
    </div>

    <div class="container">
your content
        <!-- here there other content of the site where the video should not appear in background   -->

    </div>

</body>