CODEWITHSUNDEEP
htmlcssresponsive-design
Oscar Godson
Oscar Godson

Reputation: 32716

Background video that acts like CSS' background size cover of an element, not entire page

I'm trying to code up a new site where there's a big splash background as a "hero" image. Like this site has, but as a video where the image is of the lady unloading the car: https://www.simple.com

Resize and you can see how the image always fits within it's parent.

I put some of the code I've been working on in JSBin here (not making much progress): http://jsbin.com/ruqisa/1/edit

I can't seem to get that same behavior with CSS. I want the video to spill outside the parent either width or height wise depending on the dimensions of the screen.

Has anyone done this with pure CSS? JS I could calculate it manually on resize, but I'd really love to do this with just CSS.

EDIT: I'm not looking for the entire page to be a video, just the header background.

Upvotes: 6

Views: 5094

Answers (3)

misterManSam
misterManSam

Reputation: 24692

Let's adapt the technique outlined on the blog demosthenes.info.

Option 1 — Scroll with the page

The parent div:

  • is given a fixed height and overflow: hidden

The video:

  • is stretched with min-width: 100% and min-height: 100%
  • is placed behind content with z-index: -1 (can be any negative number)

To center the video:

  • top and left are set to 50% which places the top-left corner in the middle of the parent div
  • the video is offset by half the height and width by dragging it halfway up and to the left with transform: translateX(-50%) translateY(-50%);

Simplified example

Here is a full demo with all your markup.

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>

2 — Fixed full page background

The video:

  • doesn't need a wrapper, it can be placed anywhere on the page
  • is made position: fixed and will position itself in relation to the browser window (viewport)
  • is stretched with min-width: 100% and min-height: 100%
  • is placed behind content with z-index: -1 (can be any negative number)

To center the video:

  • top and left are set to 50% which places the top-left corner in the middle of the screen
  • the video is offset by half the height and width by dragging it halfway up and to the left with transform: translateX(-50%) translateY(-50%);

Simplified example

Here is a full demo with all your markup.

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>

Upvotes: 4

Ashesh
Ashesh

Reputation: 3589

.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 first positioned absolutely then centered using top, left and transform properties along the X and Y axis. That -webkit- vendor prefix is for safari (Can I use... Support tables for HTML5, CSS3, etc).

The min-height and min-width properties force smaller resolution video to occupy the whole page.

The background property gives a preview image until the video is ready to be played. background: cover is for this preview image, to make it occupy the full area.

and the z-index value makes sure that the video is behind all other elements.

Upvotes: 2

stvnrynlds
stvnrynlds

Reputation: 2159

Yes, you can achieve this affect with pure CSS pretty easily:

.container {
    height: 600px;
    width: 100%;
    overflow: hidden;
}

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

If you want to keep it centered or do a full screen video, you will probably need to use some Javascript for calculating window heights.

Upvotes: 0

Related Questions