Video Backgrounds for WordPress

You 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:
lTW937ld02Y
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.

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 Frame 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 Commons 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:

{code type=php}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:

#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.

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.

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.

Credit: Sunset image adapted from VinothChandar

Tags:

• YouTube
• backgrounds
• video