Achieve a full-width background video without adjusting the height, preferably without the use of JavaScript

Question

Achieve a full-width background video without adjusting the height, preferably without the use of JavaScript

I have scoured various sources in search of the answer to this question but have come up empty-handed.

While I am aware that similar queries have been made before, please hear me out.

I am interested in incorporating a video background on a website where it spans 100% of the width but only a specific, pixel-defined height (let's say 500px). This setup is akin to the one seen on the current AirBnB homepage: .

Furthermore, my aim is to achieve this effect using solely HTML/CSS, without resorting to JS/jQuery unless absolutely necessary.

Is such a task feasible?

Thank you.

css html video

Answer 1

Answer №1

TRICK FOR CENTERING

To center a video that is wider or taller than the viewport, we can create a large container that exceeds both the video and the viewport dimensions.

This approach eliminates the need to use negative top or left values, which can be tricky to get right. Using calc() and viewport units may seem like a solution, but it may not work consistently across browsers.

Instead, by creating a substantial container as illustrated below:

#myvid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    height: 300%; top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
  }
}

We can then employ any CSS technique such as Flexbox to easily center the video within this container.

Alternatively, using the video element itself can act as an auto-centering container without the need for additional CSS manipulation, functioning similarly to a background-size: contain property in CSS.

FULL SOURCE -

Answer 2

TRICK FOR CENTERING

To center a video that is wider or taller than the viewport, we can create a large container that exceeds both the video and the viewport dimensions.

This approach eliminates the need to use negative top or left values, which can be tricky to get right. Using calc() and viewport units may seem like a solution, but it may not work consistently across browsers.

Instead, by creating a substantial container as illustrated below:

#myvid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    height: 300%; top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
  }
}

We can then employ any CSS technique such as Flexbox to easily center the video within this container.

Alternatively, using the video element itself can act as an auto-centering container without the need for additional CSS manipulation, functioning similarly to a background-size: contain property in CSS.

FULL SOURCE -

Answer 3

Answer №2

Have you experimented with using viewport scaling?

<video id="video" width="100vw" height="500px" controls autoplay>
    <source src="content/video/video.mp4" type="video/mp4">
    <source src="content/video/video.ogg" type="video/ogg">
</video>

The width is set to 100% of the viewport width, which equals window.innerWidth in javascript.

It's important not to use a fixed height as it can restrict your website's responsiveness.

UPDATE

As of now, setting a background-video in CSS remains a challenge, but here's a snippet to help you in the meantime.

There is an issue with overriding the video aspect ratio, so keeping it at 16:9 should prevent any problems. Adding a poster image to the video can improve the overall appearance before the video loads.

Here is an example using only CSS and HTML:

video#bgvid {
  position: fixed;
  top: 0;
  left: 50%;
  min-width: 100%;
  width: 100%;
  height: auto;
  /*height: 500px;*/
  z-index: -100;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-size: cover;
}
h3 {
  color: #fff;
}

<video playsinline autoplay muted loop id="bgvid" poster="http://placehold.it/350x150">
  <source src="https://11-lvl3-pdl.vimeocdn.com/01/2754/1/38772314/89366703.mp4?expires=1480575828&token=0069911f2c4e6972f2d2c" type="video/mp4">
</video>
<h3>HEADING</h3>

For further details, check out:

Answer 4

Have you experimented with using viewport scaling?

<video id="video" width="100vw" height="500px" controls autoplay>
    <source src="content/video/video.mp4" type="video/mp4">
    <source src="content/video/video.ogg" type="video/ogg">
</video>

The width is set to 100% of the viewport width, which equals window.innerWidth in javascript.

It's important not to use a fixed height as it can restrict your website's responsiveness.

UPDATE

As of now, setting a background-video in CSS remains a challenge, but here's a snippet to help you in the meantime.

There is an issue with overriding the video aspect ratio, so keeping it at 16:9 should prevent any problems. Adding a poster image to the video can improve the overall appearance before the video loads.

Here is an example using only CSS and HTML:

video#bgvid {
  position: fixed;
  top: 0;
  left: 50%;
  min-width: 100%;
  width: 100%;
  height: auto;
  /*height: 500px;*/
  z-index: -100;
  -ms-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-size: cover;
}
h3 {
  color: #fff;
}

<video playsinline autoplay muted loop id="bgvid" poster="http://placehold.it/350x150">
  <source src="https://11-lvl3-pdl.vimeocdn.com/01/2754/1/38772314/89366703.mp4?expires=1480575828&token=0069911f2c4e6972f2d2c" type="video/mp4">
</video>
<h3>HEADING</h3>

For further details, check out:

Achieve a full-width background video without adjusting the height, preferably without the use of JavaScript

Answer №1

Answer №2

Similar questions

verify access with mysql database

Looking to adjust the positioning of text being inserted into a column - unable to utilize text-align or float properties

Eliminate the lower boundary of a divisional table

Looking to transform a list into JSON format using JavaScript?

Loading jsp content into a div dynamically within the same jsp file upon clicking a link

Having trouble with JQuery's append method on the <head> tag?

Identifying a Resizable Div that Preserves its Aspect Ratio During Resizing

Is $timeout considered a questionable hack in Angular.js development practices?

How can I use AngularJS to show a JSON value in an HTML input without any modifications?

Working with radio buttons in a loop using PHP

What is the best way to add a value to the value attribute of a div using JavaScript?

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Is there a problem with the alignment of

Having trouble getting the jquery tabify plugin to work properly

Move the scroll event binding from the parent element to the child element

Adjust the position of the icon in the Mui DatePicker widget

Centering numerous elements on all screen sizes and devices

Is it possible to create a grid by arranging each statement with a specific format?

What is the method for showcasing an image stored in a Mysql database as a Medium Blob on my webpage?

Center and align pictures within a stationary container