Full Screen HTML5 Video Background without JS

Question

I would like to create a full-screen video background on my website, ideally using only HTML and CSS. I also need the video background to be stuck to the top of the page, so the users first view is entirely covered by the video and then they can scroll down and move past the video.

I need the video to be responsive and preserve the aspect ratio. However, to avoid black bars, I would like the video to fill 100% of which ever dimension (width or height) is the smallest, and then overflow the video for the other dimension.

This is my solution so far...

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <div class="row">
      <div class="col-md-12"></div>
    </div>
    <div class="row Page1">
      <div class="col-md-6 button1">
        <button type="button" class="btn btn-primary btn-lg outline">Pre-Order</button>
      </div>
      <div class="col-md-6 button2">
        <button type="button" class="btn btn-primary btn-lg outline">About Us</button>
      </div>
    </div>
    <video autoplay loop class="fillWidth">
      <source src="Images/Comp 2.mp4" type="video/mp4" />
      Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div>
  </div>
</div>

CSS:

.video-container {
  position: relative;
  bottom: 0%;
  left: -15px;
  height: 100% !important;
  width: 100vw;
  overflow: hidden;
  background: #000;
  display: block !important;
}

.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}

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

It works for the width, but I get black bars if the height is too big for the video, i.e. the width won't overspill. How can I define this to ensure that both the width and height are at least 100% filled? I thought the min-height and min-width attributes would have done this, but this scales both height and width beyond 100% and when I resize, the video doesn't scale, it just cuts off more of the video's width (and doesn't keep the video central). Whereas, if I just use the width and height definitions in the .video-container video.fillWidth CSS attribute, I do get the video centrally, but I get black bars.

Here is a JSFiddle It currently shows that black bars are appearing above and below (also on the left and right, although this is hard to see) when the aspect ratio is different to the viewport ratio.

NB: I am using bootstrap 3 and my adjustedheight attribute allows space for the navbar.

EDIT:

To answer the close requests, the linked question has answered which require JS, which I don't want to use.

Thanks for your help, I would really love to get a resolution to this as it doesn't seem to make sense based on what my code should be doing - not sure where I am going wrong...

Does anyone have any thoughts? Since my JSFiddle everything seems to have gone quiet...

Try putting your `video-container` in body Tag and use *{ margin = 0; padding=0; } — Lakshya, Jan 22 '16 at 14:51
@Lakshya I am afraid that hasn't helped - I'll post a JSFiddle — George Edwards, Jan 22 '16 at 15:15
@GeorgeEdwards how do you expect an overflow of the smaller length to keep a ratio intact? If width reaches 100vw, and the video's ratio is 16:9 you want the 9 portion to overflow? If it did, then the width would have to exceed 100vw. If that's what you actually want, I believe that would be a `background-size: clip`. — zer00ne, Jan 24 '16 at 10:57

score 4 · Accepted Answer · answered Jan 24 '16 at 11:00

I am not sure I totally got your requirements, but it sounds to me that you are looking for the object-fit attribute, with the value cover.

From mdn :

cover
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

html,
body,
div.video-container,
video
 {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

video{
  height: 100%;
  width: 100%;
  object-fit : cover;
}

.video-container {
  overflow: hidden;
  background: #000;
  display: block !important;
  position: relative;
}

.video-container video {
  position: absolute;
  z-index: 0;
  bottom: 0;
}

.title-container {
  z-index: 10;
  color: #FFF;
  position: absolute;
}

.adjustedHeight {
  height: calc(100% - 77px);
  width: 100%;
  padding: 0;
}

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <div class="row">
      <div class="col-md-12"></div>
    </div>
    <div class="row Page1">
    </div>
    <video autoplay loop class="fillWidth">
      <source src="http://dfcb.github.io/BigVideo.js/vids/dock.mp4" type="video/mp4" /> Your browser does not support the video tag. I suggest you upgrade your browser.</video>
    <div class="poster hidden"> <img src="http://www.videojs.com/img/poster.jpg" alt=""> </div>
  </div>
</div>

score 1 · Answer 2 · answered Jan 22 '16 at 14:56

I believe min-width and min-height both set to 100% is the correct way to go, but all of the parent heights also have to be set to 100% in order for it to work.

html, body, div.container-fluid, div.video-container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
video, source {
  min-height: 100%;
  min-width: 100%;
}

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <video autoplay loop class="fillWidth">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
      Your browser does not support the video tag. I suggest you upgrade your browser.</video>
</div>

I am afraid this doesn't seem to be working - I am still getting black bars - I'll post a JSFiddle — George Edwards, Jan 22 '16 at 15:15

score 0 · Answer 3 · answered Jan 22 '16 at 15:45

0

I'm not sure if you're asking fullscreen w.r.t. the browser window itself or fullscreen as in the entire monitor, but if it is the former I think the following post might help you with your issue:

http://slicejack.com/creating-a-fullscreen-html5-video-background-with-css/

answered Jan 22 '16 at 15:45

unxn3rd

257
2
5

This seems to act as whole page background, I want to be able to scroll past my video, i.e. the background only to one section of my page, which is the same size as the viewport. – George Edwards Jan 22 '16 at 15:47

score 0 · Answer 4 · answered Jan 22 '16 at 15:53

0

Likely this will work-

.video-container{
width:100vw;
height:100vh;
}

Where vw is viewport width and vh is viewport height.

answered Jan 22 '16 at 15:53

Sarhad Salam

428
3
12

I am not having any problems with the video container, it ios the dynamic resizing to the video, whilst maintaining the aspect ratio which is causing issues. I can't seem to define the video to fill both the width and height, whilst letting whichever dimension that needs to, to overflow. – George Edwards Jan 22 '16 at 16:07

Full Screen HTML5 Video Background without JS

EDIT:

4 Answers4

Linked