100%

Full Screen HTML5 Video Backgrounds

R Proffitt
by Richard Proffitt
iopan design

The full screen video background has become something of a popular trend which continues to grow. The more successful video backgrounds consist of short looping video clips, most often without sound. The text or other images are then layered over the top of the video. In this article I'll be showing six different examples of how the background video effect can be achieved.

Using the HTML5 <video> Element.

In all of the examples shown I'll be using the HTML video element. If you are unfamiliar with this element and technique then you can refer to the following article to get you up to speed: HTML5 Video.

As this is a relativly new tag, brought in to the markup language with various other changes in the production of HTML5, I have listed the browser compatibility in a table below. If you'd like to know about the other new HTML5 elements then take a look at the article: What’s New in HTML5.

Browser Compatability.

Element
<video> 4.0 9.0 3.5 4.0 10.5
img

Example 1

DOWNLOAD  DEMO

The first and most basic and straightforward example is from the Envato blog. You'll find the original article at: https://envato.com/blog/video-background-html5-video/. I have adapted it slightly for my own example, as you will see.

Looking first at the HTML, we have the familiar use of the HTML5 <video> element:

<video id="my-video" class="video" muted loop autoplay>
  <source src="../../video/demo.mp4" type="video/mp4">
  <source src="../../video/demo.ogv" type="video/ogg">
  <source src="../../video/demo.webm" type="video/webm">
</video>

The video has been given the id ‘my-video’. This, however is not strictly necessary unless you are using javaScript in some way to control the video. Then you will need to id it in order for the javaScript to call it. Next, you will see that the video has a class called ‘video’. This is used so that the CSS styles can be applied to the element (see below).

We have three attributes inside the opening element tag: muted; to remove the audio from the media, loop; to make the video re-start every time it reaches the end, and, autoplay; making the video start playing as soon as the page has loaded. Note that autoplay isn't used in the original demo. I have added it here to make this example as simple as possible, ie. there is no use of javaScript. In the original file javaScript is utilised in order to recognise if the browser can handle the html video tag and to see when the page has loaded.

Adding CSS Styles

By adding the following styles to the video element, we can ensure that the video is centered when viewed at all screen sizes. By setting the position to ‘fixed’ we keep the film fixed to the screen’s viewing area. The z-index is set at 1, so that we can place it behind any other content which we shall apply a higher z-index number to.

.video {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

Next we need to create the styles for the content. Firstly, a general piece of styling for all of the content to make it visable and in the correct position:

.content {
  position: relative;
  top: 23%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

As you see, we give the content a ‘relative’ position — the default position making the content moveable in the normal way. We drop the content to about a quarter of the way down the screen (23%). Then, importantly, we set the z-index for 2, that is, layered over the top of the video. Finally, we center the content with margin: 0 auto; and center the text with text-align: center;. All that remains is to style the actual text and the call-to-action button:

.content__heading {
  margin-bottom: 24px;
  color: #272727;
  font-size: 44px;
}

.content__text {
  margin-bottom: 24px;
  color: #595959;
  font-size: 22px;
}

.content__cta {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: #ff3c64;
  font-size: 22px;
  text-decoration: none;
  border: solid 4px #ff3c64;
}

You may wish to add a hover state to the cta button, which you can do easily with: .content__cta:hover {…}. So that is the most basic way of creating a background video web page. The following examples are all variations on this basic structure, some employing javaScript for extra functionality.


Example 2

DOWNLOAD  DEMO

This demonstration has come from Elon Zito's post on Codepen. It is very similar to the last example with just a few changes.

The background-attachment: fixed; will prevent the background from moving when the page is scrolled. The background size: cover; will resize the background video to cover the entire container, even if it has to stretch the video or cut a little bit off one of the edges.

Notice how in this example, the video is not centered, rather it is fixed to the bottom right-hand corner. Re-size the screen to see how this works. The CSS used is rather different when it comes to the positioning of the video:

#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

Also, the z-index is set with a negative number: z-index: -100; which is rather more cautious than previous examples!


Example 3

DOWNLOAD  DEMO

This design has come from Dudley Storey's post, also on Codepen. It uses the same tecnique to center the video on the screen as the first example, where it is fixed with the positions top and left both set to 50%. Then, once the center has been discovered and the top left corner has been placed there, we need to shift this corner back to it's ideal place: back 50% horizontally and back 50% vertically. This is achieved in CSS with the following:

transform: translateX(-50%) translateY(-50%);

Adding a Default Fallback Image

If a users' internet connection is slow then it may take some time for the background video to load. In this case it is preferable (and good practice) to have a fallback image to load in place of the video. There are a couple of ways of doing this. You can either place an image in the background of the video element's CSS or you can add the poster attribute to the <video> element in the HTML. In the current example, the former option is prefered, in the CSS it looks like this:

video {
	background: url("../../video/background-geometric-poly-floor.jpg") no-repeat;
	background-size: cover;
}

In the next example (Example 4), the poster attribute is used to achieve the same effect.


Example 4

DOWNLOAD  DEMO

This example has come from Matt Gross, for EvenVision. Again, we see the use of background-attachment: fixed; and background-size: cover; on the <body> tag and again the video is fixed by it's bottom right corner to the screen with the CSS:

#video-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}
Adding CSS Styles

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.


Example 5

DOWNLOAD  DEMO

This demonstration has come from Elon Zito's post on Codepen. It is very similar to the last example with just a few changes.

The background-attachment: fixed; will prevent the background from moving when the page is scrolled. The background size: cover; will resize the background video to cover the entire container, even if it has to stretch the video or cut a little bit off one of the edges.

Adding CSS Styles

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.


Example 6

DOWNLOAD  DEMO

This demonstration has come from Elon Zito's post on Codepen. It is very similar to the last example with just a few changes.

The background-attachment: fixed; will prevent the background from moving when the page is scrolled. The background size: cover; will resize the background video to cover the entire container, even if it has to stretch the video or cut a little bit off one of the edges.

Adding CSS Styles

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

img
Full Screen Video Websites

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos

Making Your Video Responsive

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

“I have several times made a poor choice by avoiding a necessary confrontation.”

John Cleese

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit.

Endnote

Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim. ❧

 


Articles