Video background function that mimics CSS's background size cover for a specific element, instead of the entire webpage

Question

Video background function that mimics CSS's background size cover for a specific element, instead of the entire webpage

In the process of developing a new website, I am looking to incorporate a large splash background as a "hero" image. Similar to the website found at , I am hoping to use a video as the background image showing a woman unloading a car.

One key requirement is that the image always fits within its parent container when resizing the browser screen. I have attempted to achieve this using the code provided in JSBin here: http://jsbin.com/ruqisa/1/edit, but have not made much progress.

Thus far, I have been unsuccessful in replicating this behavior using CSS alone. Ideally, I would like the video to extend beyond the boundaries of its parent container based on the screen dimensions, either in width or height.

Has anyone successfully accomplished this using only CSS? While I could manually calculate this using JavaScript upon resize, I am hoping to achieve the desired effect with CSS exclusively.

EDIT: To clarify, I am looking to make only the header background a video, not the entire page.

html css responsive-design

Answer 1

Answer №1

Let's utilize the method outlined on demosthenes.info blog.

Method 1 — Scroll with Page

Main container:

Has fixed height and overflow: hidden

The video:

Is stretched using min-width: 100% and min-height: 100%
Is positioned behind content with z-index: -1 (any negative number can be used)

To center the video:

top and left are set to 50% to align the top-left corner in the middle of the container
The video is adjusted by half the height and width by shifting it up and left by 50% using
```
transform: translateX(-50%) translateY(-50%);
```

Example

Here is a full demo with the markup provided.

body {
  height: 200vh;
  margin: 0;
}
div {
  height: 500px;
  overflow: hidden;
  position: relative;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
  transform: translateY(-50%) translateX(-50%);
}

<div>
  <video autoplay muted loop>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
</div>

Method 2 — Fixed full page background

The video:

Can be placed anywhere on the page without a wrapper
Is set to position: fixed to position itself according to the browser window
Is stretched using min-width: 100% and min-height: 100%
Is placed behind content with z-index: -1

To center the video:

top and left are set to 50% aligning the top-left corner in the middle of the screen
The video is adjusted by half the height and width by shifting it up and left by 50% using
```
transform: translateX(-50%) translateY(-50%);
```

Example

Here is a full demo with the markup provided.

body {
  margin: 0 auto;
  padding: 50px;
  color: #FFF;
  width: 600px;
}
video.background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
}

<h1>I am content</h1>
<p>I am content too!</p>
<video class="background" autoplay muted loop>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

Answer 2

Let's utilize the method outlined on demosthenes.info blog.

Method 1 — Scroll with Page

Main container:

Has fixed height and overflow: hidden

The video:

Is stretched using min-width: 100% and min-height: 100%
Is positioned behind content with z-index: -1 (any negative number can be used)

To center the video:

top and left are set to 50% to align the top-left corner in the middle of the container
The video is adjusted by half the height and width by shifting it up and left by 50% using
```
transform: translateX(-50%) translateY(-50%);
```

Example

Here is a full demo with the markup provided.

body {
  height: 200vh;
  margin: 0;
}
div {
  height: 500px;
  overflow: hidden;
  position: relative;
}
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  z-index: -1;
  transform: translateY(-50%) translateX(-50%);
}

<div>
  <video autoplay muted loop>
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  </video>
</div>

Method 2 — Fixed full page background

The video:

Can be placed anywhere on the page without a wrapper
Is set to position: fixed to position itself according to the browser window
Is stretched using min-width: 100% and min-height: 100%
Is placed behind content with z-index: -1

To center the video:

top and left are set to 50% aligning the top-left corner in the middle of the screen
The video is adjusted by half the height and width by shifting it up and left by 50% using
```
transform: translateX(-50%) translateY(-50%);
```

Example

Here is a full demo with the markup provided.

body {
  margin: 0 auto;
  padding: 50px;
  color: #FFF;
  width: 600px;
}
video.background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  transform: translateX(-50%) translateY(-50%);
}

<h1>I am content</h1>
<p>I am content too!</p>
<video class="background" autoplay muted loop>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

Answer 3

Answer №2

.big-splash video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(some.jpg) no-repeat;
  background-size: cover;
}

DEMO: http://jsbin.com/lunarugibe/1/

Source: Create Fullscreen HTML5 Page Background Video

The video is initially positioned absolutely and then centered using properties like top, left, and transform along the X and Y axis. The inclusion of the -webkit- vendor prefix is for compatibility with Safari (Can I use... Support tables for HTML5, CSS3, etc).

By setting the min-height and min-width properties, smaller resolution videos can still fill the entire page.

The use of the background property provides a preview image until the video is ready to play. The background: cover ensures that the preview image spans the full area.

Finally, the z-index value guarantees that the video remains behind all other elements on the page.

Answer 4

.big-splash video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(some.jpg) no-repeat;
  background-size: cover;
}

DEMO: http://jsbin.com/lunarugibe/1/

Source: Create Fullscreen HTML5 Page Background Video

The video is initially positioned absolutely and then centered using properties like top, left, and transform along the X and Y axis. The inclusion of the -webkit- vendor prefix is for compatibility with Safari (Can I use... Support tables for HTML5, CSS3, etc).

By setting the min-height and min-width properties, smaller resolution videos can still fill the entire page.

The use of the background property provides a preview image until the video is ready to play. The background: cover ensures that the preview image spans the full area.

Finally, the z-index value guarantees that the video remains behind all other elements on the page.

Answer 5

Answer №3

Achieving this effect using only CSS is quite simple:

.wrapper {
    height: 500px;
    width: 100%;
    overflow: hidden;
}

.video {
    min-height: 100%;
    min-width: 100%;
}

If you wish to center it or create a full-screen video, you may need to incorporate some JavaScript to calculate window heights.

Answer 6

Achieving this effect using only CSS is quite simple:

.wrapper {
    height: 500px;
    width: 100%;
    overflow: hidden;
}

.video {
    min-height: 100%;
    min-width: 100%;
}

If you wish to center it or create a full-screen video, you may need to incorporate some JavaScript to calculate window heights.

Video background function that mimics CSS's background size cover for a specific element, instead of the entire webpage

Answer №1

Method 1 — Scroll with Page

Example

Method 2 — Fixed full page background

Example

Answer №2

Answer №3

Similar questions

Modify the displayed image when hovering using inline coding techniques

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

jQuery document.ready not triggering on second screen on Android device

Dynamically updating the scroll area in Ionic using real-time data

Preserve the original color of links in CSS by using the `a

What is the best way to increase the height of an image in a grid container beyond the height of

The enigmatic "margin-30" element within adaptable layout design

Restrict printing loops within the designated division layer

Placing images inside a div causes them to vanish

What is the best way to display a webpage within an iOS app using PhoneGap?

Using setTimeout to click and hold on an element in Javascript

Hover events in the browser are currently operating at a sluggish pace

Preventing Event Propagation in Jquery is Quite a Challenge

I encounter issues with HTML input fields becoming unresponsive whenever I attempt to apply CSS filters in IE8 for stretching the background

Incorporate a horizontally rotating preloader to enhance loading experience

Utilizing jquery for displaying and hiding notifications - Notyfy in action

What is the best way to eliminate spaces when moving to a new line in HTML?

Adjust the parent div's background color when a radio button is selected

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

Generating values in a loop - mastering the art of creating data points