Full Screen Video

By Patrick Lopez, . Permalink

A first attempt with full screen video.

I just uploaded my first page with a full screen video background. Here's the steps:

1. Took about 24 seconds of video with my phone.

2. Ran it through Adobe Premiere, corrected for stability, cropping, smoothness, and length.

3. Exported it as mp4 (H264 codec).

4. Installed the Fnord AdobeWebm plugin converter from GitHub, exported as Google's Webm format.

5. Set up the HTML5 with the two formats as options. Put in a still poster.

<div class="fullscreen-bg">
       <video class="fullscreen-bg__video" autoplay loop muted poster="pier2still.png">
           <source src="pier2_use.mp4" type="video/mp4"/>
           <source src="pier2_1.webm" type="video/webm"/>
       </video>
   </div>
   <div class="content">
   <h1>Pacific Rim Web</h1>
       <h1>Full screen HTML5 video background</h1>
       <p>Lower than 767px wide will display a still poster of the video. Scrunch down your browser window, dragging it smaller in size to see this effect.</p></div>

6. Set up the CSS3. With: 

.fullscreen-bg {    position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: -100;}

.fullscreen-bg__video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%; }


7. Put in the media query to cancel the video below 767 px, and put the still in:

 @media (max-width: 767px) {
   .fullscreen-bg {
       background: url('pier2still.png') center center / cover no-repeat;    }

.fullscreen-bg__video {
       display: none;  } }


8. Uploaded! Pretty neat, but the file sizes are way too large. I need to bring them down with Premiere. What I like about this is the way the Stabilizer effect in Premiere allows for smooth looping. If it wasn't for the little bird in the lower right, it'd be tough to recognize.

Sorry about the code postings, learning it quick.

Full Screen Video
A link to the site.
...And below, a newer version using different video. These files are much more optimized (mp4 4 Mb, Mov ~ 100Kb ...but what uses Mov format standalone in HTML5?!? This is all about standalone.)

Blue Rotating Stage
A Blue Rotating Stage, still with some loop glitches. Maybe that was me in Premiere on my I/O marks.

Page top