Video Backgrounds

Video backgrounds are pretty straightforward.  Add a <video> element somewhere near the beginning or end of the body element:

<video id="bgvid" poster="bgvid.jpg" autoplay muted loop><source src="bgvid.mp4" type="video/mp4"></video>

The autoplay, muted, and loop attributes are appropriate for a background, and the poster attribute is a still from the first frame of the video, something to display until the video downloads enough.  (To get that still image, I did something odd with VLC, probably a better way to do it, but it was  VLC > Preferences > Show All > Video > Filters > Scene filter and set video ration all the way up so I only get 1 still captured.)

Then, use CSS to position it centered and full-screen behind everything else, something like:

#bgvid {
    position: fixed;
    z-index: -100;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #000;
    opacity: 0.5;
}

The only concern is on mobile… the video will just be annoying on mobile and be a waste of data.  we can use a media query to hide the video element and set the still as the background image, but the video will still download when it’s hidden.

A better approach is to insert the video with JavaScript only if the screen is a certain width:

if(window.innerWidth > 800){
    document.body.insertAdjacentHTML('afterbegin','<video id="bgvid" poster="bgvid.jpg" autoplay muted loop><source data-src="bgvid.mp4" type="video/mp4"></video>');
}

This adds the element just inside the opening <body> tag.

 

All the necessary code could be in the appropriate theme template file, or in a function like so:

function aloer_add_video_bg() {

    if ( !is_front_page() ) return;// only add to home page

    $dir = get_stylesheet_directory_uri() . "/img";// directory path to be used a few places below
    
print <<<BGVIDEO
    <style>
    #bgvid{position:fixed;z-index:-100;min-width:100%;min-height:100%;width:auto;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);background:#000;opacity:0.5;}
    @media(max-width:800px){#bgvid{display:none;}html{background:#000 url({$dir}/bgvid.jpg) center/auto fixed no-repeat;}}
    </style>
    <script>
    if(window.innerWidth > 800){ document.body.insertAdjacentHTML('afterbegin','<video id="bgvid" poster="{$dir}/bgvid.jpg" autoplay muted loop><source src="{$dir}/bgvid.mp4" type="video/mp4"></video>'); }
    </script>
BGVIDEO;
}
add_action( 'wp_footer', 'aloer_add_video_bg', 1 );

(The <<<BGVIDEO is “Heredoc” syntax.  Seemed convenient to use here since we’re are already using both single and double quotes and variables in the code.)

Another option, if you’re going to have different videos on a page or throughout the site, would be a script like this:

(function(){
   if(window.innerWidth > 800){
      var videos = document.getElementsByTagName('video');
      for ( var i = 0, l = videos.length; i < l; i++ ){
         var src = videos[i].firstElementChild.getAttribute('data-src')
         if ( src ) {
            videos[i].firstElementChild.setAttribute('src', src );
            videos[i].load();
         }
      }
   }
})();

This will find all video elements on the page and look for a data-src attribute.  If found, it will copy that value to the src attribute and re-load the video.  So for this, you’d write in the videos like:

<video id="bgvid" poster="bgvid.jpg" autoplay muted loop><source data-src="bgvid.mp4" type="video/mp4"></video>

Notice there is no src attribute, so the video won’t actually download or play until the JavaScript runs and moves the source url into place. data-src is acting like a placeholder. (You don’t have to use data-src, you can give it any name you want. See more about data-* attributes.)

Leave a Comment