CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user186730
user186730

Reputation: 79

HTML5 video tag - how to set cover background size

I am trying the video tag of HTML5 and want to give background size cover property to it. It is not taking that property. I had given width: 100% and height: 100%, also the video go outside container.

How I can achieve it ?

Upvotes: 1

Views: 4533

Answers (3)

Preston Badeer
Preston Badeer

Reputation: 2717

I needed to center the video and use it as a background, so I've cleaned and enhanced the answer Jagu provided. It now optionally centers the video, and has an optional color overlay.

Live Demo: https://jsfiddle.net/prrstn/vn9L2h1w/

HTML

<div>
  <!-- Optional attributes, remove the features you don't want.
  Add the "controls" attribute to get the video player buttons -->
  <video autoplay loop muted>
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
  </video>
</div>

CSS

div {
  /* This keeps the video inside the div */
  position: relative;
  /* These are optional based on the size of 
  the area you want the video to cover */
  width: 100%;
  height: 500px;
  /* Color overlay on video, optional */
  background-color: rgba(0, 0, 0, 0.5);
}

video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* This puts the video BEHIND the div, optional */
  z-index: -1;
  /* These two properties center the video, optional */
  left: 50%;
  transform: translateX(-50%);
}

Upvotes: 0

SirDeveloper
SirDeveloper

Reputation: 276

I suggest you to put your video tag inside a div wrapper.
Rather than seeing video deformed, I prefer show black background.
DEMO.
In this way, video will adapt itself to the parent div size.

HTML

<div id="main">
  <video id="bunny" controls>
    <source src="../video/video.mp4>
  </video>       
</div>

CSS

#main {
    height: 300px;
    width: 300px;
    background-color: black;
}

#bunny {
   width: 100%; 
   height: 100%; 
}

Upvotes: 0

Jagu
Jagu

Reputation: 762

CSS:

video#videoId{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}

Fix para IE:

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

video { display: block; }

Upvotes: 5

Related Questions