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

Answer 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;
}