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-containervideo {
  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;
}

<divclass="container-fluid adjustedHeight"><divclass="video-container"><divclass="row"><divclass="col-md-12"></div></div><divclass="row Page1"></div><videoautoplayloopclass="fillWidth"><sourcesrc="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><divclass="poster hidden"><imgsrc="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%;
}

<divclass="container-fluid adjustedHeight"><divclass="video-container"><videoautoplayloopclass="fillWidth"><sourcesrc="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.