Nowadays user interface and experience are more important now than ever. If you’re building a digital identity, whether it be for a website or application, “look and feel” play an extremely important part.

Today, I’m going to show you how to use native HTML5 video, and implement it in the background of your site. All without using a plugin or Flash. We’ll take a look at some of the native video controls too, to make sure that a user’s experience is fully enhanced.HTML5-Full-screen-Video-Page-Background

Browser Compatibility:

As we mentioned before, this technology is developed in HTML5, so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers.  For today, it is supported by next browsers:

  • Chrome 4+
  • Firefox 3.5+
  • Safari 4+
  • IE 9+
  • Opera 10.5+

Important: Internet Explorer 8, and earlier versions, does not support the HTML’s Video property.

Videos in HTML 5

HTML5 video compatibility is really high. In fact, it’s supported in all modern browsers and Internet Explorer 9+. The inner workings of video in general can be complicated, especially when you start to dig into multiple formats, tracks, containers, and the works.

The <video> tag specifies video, such as a movie clip or other video streams.

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg

  • MP4 – MPEG 4 files with H264 video codec and AAC audio codec
  • Ogg – Ogg files with Theora video codec and Vorbis audio codec
  • WebM – WebM files with VP8 video codec and Vorbis audio codec
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES
from Firefox 21
from Firefox 30 for Linux
YES YES
Safari YES NO NO
Opera YES
From Opera 25
YES YES

To get your video formats in check, I suggest using the robust ffmpeg tool. If you just want to play around for now, then mp4 formats should do the trick.

Using video in your HTML5 document is as easy as this:

<video>
  <source src="media/demo.mp4" type="video/mp4">
  <source src="media/demo.ogv" type="video/ogg">
  <source src="media/demo.webm" type="video/webm">
  Your browser doesn't support HTML5 video. Here's a <a href="#">link</a> to download the video.
</video>

Tip: Any text between the <video> and </video> tags will be displayed in browsers that do not support the <video> element.

HTML

Let’s imagine that we want to build a page with a full-screen background video. Let’s say it can be a landing page of new product or may be a introducing page of company, so above that video, we want some heading text, some sub-text, image or buttons etc.

We can’t quite have just one container with a background video in CSS, and the text inside that container. CSS doesn’t allow for video.

What we can do though is some basic CSS tricks that’ll allow us to position our video absolutely in our parent container, breaking the regular flow of the document. Let’s take a look at what the markup might look like:

<div class="content">
  <h1>HTML5 Full-screen Video Page Background</h1>
  <p>Today, I'm going to show you how to use native HTML5 video, and implement it in the background of your site. All without using a plugin or Flash. We'll take a look at some of the native video controls too, to make sure that a user's experience is fully enhanced.</p>
</div>

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

Now, it’s turn to beautify the page with CSS.

CSS

Because we’re only using a few elements in this demo, I won’t use any CSS reset or normaliser. Let’s just write up our own:

html,body,div,h1,p,a,video {
  margin: 0;
  padding: 0;
}

On top of that, let’s get rid of the default font, and include Oxygen from google fonts.

Make sure to include the viewport declaration for responsive web design too. Our full HTML document should now look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
</head>
<body>

<div class="content">
  <h1>HTML5 Full-screen Video Page Background</h1>
  <p>Today, I'm going to show you how to use native HTML5 video, and implement it in the background of your site. All without using a plugin or Flash. We'll take a look at some of the native video controls too, to make sure that a user's experience is fully enhanced.</p>
</div>

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

</body>
</html>

Remember, we’re interested in a full screen video and viewport, so we need to make sure our html and body elements are full screen. Our base CSS should now look like this:

html,body,div,h1,p,a,video {
  margin: 0;
  padding: 0;
}
html,body {
  height: 100%;
}

Alright, let’s move on!

Layering Our Content

We know we want our content layered, and that means we need to leverage z-indexing. Our content itself will exist in the normal flow of the HTML, but our video will remain fixed and in the background. Let’s start with that:

.content {
  position: relative;
  z-index: 2;
}
.video {
  position: fixed;
  z-index: 1;
}

Let’s add a little more style to our content so that we can forget about it and focus on our video. We’ll make that heading big and bold, and style the button a little bit too. I’ll just use some eyeball averages to get the content vertically centred, but there are other tricks (as we’ll see later). Here’s what I came up with:

.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  background-color:#fff;
  background:rgba(255,255,255,.6);
  border-radius:10px;
}

h1 {
  margin-bottom: 24px;
  color: rgb(39,39,39);
  font-size: 44px;
}

p {
  margin-bottom: 24px;
  color: rgb(89,89,89);
  font-size: 22px;
}

a {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: rgb(255,60,100);
  font-size: 22px;
  text-decoration: none;
  border: solid 4px rgb(255,60,100);
}

Pretty straightforward stuff, but at least now there’s some visual appeal, which makes it a bit easier for us to work. Now, we have a bit of an issue with our video. Right now, it’s just pinned to the top-left of the screen, and if you’re on a bigger screen, it’s probable not occupying all available space. Let’s look at that.

Centring & Full-Screening The Video

There’s a nifty little trick floating around these days for maintaining a perfect vertical centre of an absolutely (or fixed) positioned element relative to its container. It leverages top and transform. The translation of an element by a percentage value is calculated based on the elements dimensions.

So if we nudge something 50% from the top of a container, then translate it back up a negative 50%, it will be perfectly centered. That leaves us with this:

.video {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

Now, what about full-screening it? Well, we have to force that with a little bit of CSS again, using minimum widths and heights. Here’s the full CSS for the video:

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

Now, we have a full screen video in the background! But wait a second…it’s not even playing. Let’s handle that now.

Video Controls

There are a host of attributes at our disposal, and you can view them all here. We’re only interested in three of them, but take note that by default, the controls are hidden from view. Because we’re trying to achieve something that’s purely aesthetically pleasing, we will keep it this way. The other three attributes we’re interested in are:

  • autoplay – if specified, the video will automatically begin to play
  • muted – indicates the default setting of the audio contained in the video
  • loop – if specified, we will, upon reaching the end of the video, automatically seek back to the start

Autoplay is important, because we’re hiding the controls in the first place, and we want the video to actually play. Muted is also important, and here’s why. It’s already a little bit intrusive to outplay a video and not allow a user to pause or stop it. But we can excuse ourselves a bit, because it’s all in the name of aesthetic value.

However, if we are auto-playing a video, we definitely want to mute it by default. Finally, there’s the loop attribute. This isn’t really important so to speak, but just know that if you have a looping video clip, then this attribute takes care of that easily. Let’s add these three attributes to our video:

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

Now refresh the browser! You’re all done, and it looks beautiful.

That’s it!

I hope it’s been an interesting tutorial and not too hard to follow.

view demo

I hope you like the result and don’t hesitate to share your thoughts about it. Thanks for reading!

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.!

We respect your privacy. Your information will not be shared with any third party and you can unsubscribe at any time.
You can support this website by sharing. Thank you!