Video Backgrounds for WordPress

WordPress theme video backgroundYou don’t know how cool this is because you’ve never seen it before. Once you try it, you’ll have some fun with it and maybe even incorporate it into your current or next website. However, it’s probably not for everyone because of the bandwidth required to serve a video background; it’s loading a YouTube video and your website all at the same time.

It sure is eye-catching!

The mb.YTPlayer for background videos is an excellent, free plugin that lets you source any YouTube video as your page’s full-screen background (FYI: a paid plugin is described at the end of this post).

Here’s a (somewhat lengthy) walk-through video:

Speaking with the Italy based developer, Matteo Bicocchi, he confirmed a few limitations:

  • It only works with YouTube videos, and you must use the “long” YouTube URL.
  • You cannot source YouTube playlists, only a single video. (Workaround: just put your separate video files back-to-back in a video editor and then upload that single video file to YouTube.)
  • The video won’t display on mobile devices, which all have video “autoplay” disabled anyways.
  • YouTube advertisements and the YouTube logo will appear as usual, just like an embedded video. (So you might not want to use YouTube videos with the little yellow mark on the play bar.)

Other things to know about:

  • It uses the Flash chromeless YouTube API, which serves the videos via Flash. He’s working on a separate plugin to source videos via HTML5.
  • The background video auto-resizes. In other words, it’s responsive.

Featured Plugin - WordPress Q&A Site Plugin

It's now incredibly easy to start your own Q&A site using nothing more than WordPress - The Q&A plugin simply and brilliantly transforms any site, or page, into a perfect support or Q&A environment.
Find out more

Video Background Tips

Find videos to use

YouTube Creative Commons

If you don’t have a specific video on your computer to upload and source from YouTube, consider browsing YouTube’s collection of Creative Commons videos.

The only way to get to them is via the YouTube Video Editor. YouTube only has one type of CC license; it doesn’t separate out permissions for commercial usage vs. non-commercial usage. If you use a CC video, provide a linkback or some attribution somewhere on your site.

Once you browse YouTube’s CC videos and find one (or several) you’d like to use (watch out for low-res and advertisements), make note of the video’s “long” URL. Here are two that I found: http://www.youtube.com/watch?v=qB1Udy1H9eI and http://www.youtube.com/watch?v=vBiJVz1Mnss.

Buy from VideoHive

If you’re looking for something a bit more professional but within a small budget, browse VideoHive: maybe Perfect FrameAnalogue Photo Negative Scanning – Loopable 6 Pack, or http://videohive.net/item/fishes-20-stock-footage-in-full-hd-1920×1080/111229.

Of course, once you buy from VideoHive (and maybe even edit on your computer), then you’ll upload to YouTube to use with the WordPress plugin.

Search the web

It didn’t take but much Googling to come up with Vimeo Creative CommonsMotionShare free videos, and some video sites in SitePoint’s 30 Creative Commons Sources. If you want a WordPress video background, the hardest part now is just finding the right video to use!

A theme-wide video background

If you want to have a single video on all of your website’s pages, you can add this PHP code to your theme’s header.php file, right before the wp_head(); tag:

1
echo do_shortcode('[mbYTPlayer url="http://www.youtube.com/watch?v=qB1Udy1H9eI" ratio="16/9" mute="true" loop="true" showControls="false" opacity=1]');

If you’re trying to figure out how to get a semitransparent page background for the Twenty Eleven theme (so your video shows through a bit), find #page at Line 326 of the theme’s style.css. Change it from the color white to an rgba background. Here’s the snippet:

1
2
3
4
5
#page {
/* background: #fff; */
background: rgb(255,255,255);
background: rgba(255,255,255, 0.6);
}

User Experience concerns

I’m not going to get into a big discussion here. I think we’ve all experienced audio suddenly playing on our computer, unsure of where it was coming from, and it turned out to be a webpage. That webpage typically gets mentally filed in the “annoying things in life to avoid” compartment, and we don’t want to be that website.

So why suggest a video background plugin? Because I think there could be some really neat implementations, specifically with the audio muted or designing the page content around the background. That sounds backwards, right?Well it’s one way to use the entire screen real estate (on desktop monitors). Autoplay with audio is still on my list of pet peeves, but you may not be as sensitive to it.

Regarding bandwidth, I’d like to think that most of my site visitors are either using full computers with adequate internet speeds to load a YouTube video or using a mobile device that wouldn’t receive the video background anyways. If you’re looking to integrate video into your overall page design or entire theme, a video background might be just what you were looking for.

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

Order of Precedence (Hierarchy)

If you have a theme-wide video background (header.php) and a page/post-specific video background (in-post shortcode) and a video in the plugin’s wp-admin settings page, which one will show when?

  • If your home page (wp-admin -> Settings -> Reading -> “Front page displays”) is “Your latest posts”:
    • The plugin’s settings apply to the home page.
    • Next priority goes to the shortcode in the post/page.
    • Lowest priority goes to the theme’s header.php video.
  • If your home page is set to “A static page”:
    • The plugin’s settings apply to the home page.
    • The plugin’s settings apply to the blog page.
    • Next priority goes to the shortcode in the post/page.
    • Lowest priority goes to the theme’s header.php video.

If you look in the page’s HTML code, you’ll see that only one of the videos (in the hierarchy order detailed above) is loaded into the page. It doesn’t load the bandwidth of more than a single video, which is great.

A Paid Alternative

Donate to mb.YTPlayer for background videos

If this plugin does something special for you, or you just want to help further development, I know the author would definitely appreciate any donation amount.

Purchase WP-Backgrounds II

If mb.YTPlayer for background videos just doesn’t have enough features for you, WP-Backgrounds II might be your taste. A single-site license sells for €50 Euros, which includes an integrated auto-updater, lifetime updates, and lifetime support. It might feel like a steep price, but it does have a boatload of features, one or a few of which might be exactly what you’re looking for. The WP-Backgrounds II demo site has some (not all) example usages. Some of the mb.YTPlayer plugin limitations don’t apply to the WP-Backgrounds II plugin, and I haven’t tested the hierarchy of background codes.

Regarding buying licenses, Peter at InoPlugs explained that the plugin is not entirely GPLv2 or greater because some of the JavaScript scripts aren’t GPLv2 licensed and some graphics are proprietary. He estimated 75% or more of the code interacted with or is derived from WordPress or is otherwise licensed as GPLv2 or greater.

I scored you a rare 10% discount for the single-site license. Use coupon code “WPMU Promo” (case-sensitive). You can upgrade to more licenses any time in the future by paying the additional cost above a single-site license.

Credit: Sunset image adapted from VinothChandar

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

Participate