CODEWITHSUNDEEP
htmlcss
K. P.
K. P.

Reputation: 561

How to add background video to html page?

I also know this question is a duplicate, but I've seen all question about background video,checked many other sites for answer, and everyone writes the same code, but it's still not working for me for some reason...

So, here's the simple code I have:

#loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
}

#bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%; 
  min-height: 100%;
}
<div id="loading">
  <video id="bgvideo">
    <source src="CM.mp4" type="video/mp4">
  </video>
</div>

This code should be working according to the answers I've seen, but the video is just not playing.

Does someone know what can be the problem? Is it the code, or the source of the problem is something else?

Upvotes: 0

Views: 6698

Answers (2)

Talib Hussain
Talib Hussain

Reputation: 1344

HTML PART:

<header>
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
  </video>
  <div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
      </div>
    </div>
  </div>
</header>

CSS PART:

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

JSFiddle Link to try code

Upvotes: 0

Kamalesh M. Talaviya
Kamalesh M. Talaviya

Reputation: 1420

just put autoplay if you want it to play auto 

#loading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
}

#bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%; 
  min-height: 100%;
}
<div id="loading">
  <video id="bgvideo" autoplay>
     <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
Your browser does not support the video tag.
  </video>
  
</div>

Upvotes: 1

Related Questions