December 2, 2016 9:46 am

Create HTML5 Fullscreen Static Video Background Using CSS

In This tutorial I will show you how to add a static video background using CSS, It’s a very simple and easy script and looks amazing on landing pages. In this tutorial we are using HTML5 <video> tag to embed video and CSS to put that video on background.

Create HTML5 Fullscreen Static Video Background Using CSS

[wpdm_file id=186]DEMO

HTML5 Video used to add video on your page:

<video id="my-video" class="video" autoplay muted loop>
   <source src="videos/polina.mp4" type="video/mp4">
</video>

Above script add video using HTML5 <video> tag and in video properties we set it to mute, autoplay and loop it will play video automatically without sound and repeat it all the time in the source we put our video file.

CSS used to make video background working:

div, h1, p, a, video, h2{
    z-index: 2;
    position: relative;
}
.content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

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

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

.content__cta {
  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);
}

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

Above CSS add video on full screen of your landing page.

That’s it.

I hope you like this tutorial please feel free to comment your problems we love to help you.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

12 responses to “Create HTML5 Fullscreen Static Video Background Using CSS”

  1. Bik Byro says:

    link to demo doesn’t work

  2. Bik Byro says:

    link to demo doesn’t work

  3. olivier says:

    does not work on mobile ?

  4. Inspiren says:

    In my Dreamweaver it highlighted that “Tag must be paired”…

  5. Coevote says:

    Great Info . Its working good . I watched a full screen demo .

Leave a Reply

Your email address will not be published. Required fields are marked *