CODEWITHSUNDEEP
csshtmlvideo
George Edwards
George Edwards

Reputation: 9229

Full Screen HTML5 Video Background without JS

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

Upvotes: 4

Views: 5633

Answers (4)

Kaiido
Kaiido

Reputation: 136638

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>

Upvotes: 4

Sarhad Salam
Sarhad Salam

Reputation: 438

Likely this will work-

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

Where vw is viewport width and vh is viewport height.

Upvotes: 0

unxn3rd
unxn3rd

Reputation: 257

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/

Upvotes: 0

Jonathan Lam
Jonathan Lam

Reputation: 17351

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>

Upvotes: 1

Related Questions