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 us

Solution 1:

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>

Solution 2:

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>

Solution 3:

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/

Solution 4:

Likely this will work-

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

Where vw is viewport width and vh is viewport height.