Trends

How to Add Video Backgrounds to a WordPress Site

Video backgrounds have become a popular design feature on many websites and blogs – learn how to get one up and running.

Video backgrounds have become a popular design feature. When utilized properly, they can entertain and inform users.

Take PayPal, for example. Their use of a video background perfectly illustrates the convenience of using their services. The videos are simple and concise. I’d argue that they say more about the brand than a few paragraphs of text possibly could. Why? Because it has become the norm for so many of us to skip through the text and just navigate to where we need to go.

PayPal’s well-made videos might just make you stop and pay attention to what’s happening on your screen. It helps create a connection with the brand.

The good news is that it’s now easy to add a video background to your WordPress-powered website.

Logo_x2_retinaFor more articles, tutorials & free files click here.

Easy Video Backgrounds for WordPress

Easy Video Background WP is a WordPress plugin (there’s also a JavaScript version available) that will allow you to add video backgrounds in either a site-wide or page-by-page basis. You can even use a shortcode.

easy_video_background_wp

The plugin features a nice set of useful options but doesn’t overwhelm you. Some of the more interesting options include:

  • Video Background Positioning/z-index
    You can choose between Absolute and Fixed positioning for your video background. Fixed is useful if you want a full-screen video that stays in place through scrolling, etc. Also, there’s a handy z-index setting that will help you ensure that the background stays behind your site’s content.
  • Video Ratio
    I find this to be a great feature, since some themes out there with video background capabilities will expect you to use a specific ratio. With this setting, you can customize the ratio to that of the video you’re using, ensuring better playback quality.
  • Playback Options
    Decide if you want your video to loop, start on page load (autostart) and mute the sound.
  • Priority & Fallbacks
    The plugin has the ability to display both HTML5 and Flash video. You can choose which format should take priority, and which one is the fallback option. There is also an option for choosing a fallback image for use on mobile devices. Also included is the ability to use a YouTube or Vimeo video – all you need to do is enter the video’s ID.
  • Overlay
    Add an overlay color or image, then choose its opacity to create an interesting effect with your video.

Adding a Video

Now that we’ve reviewed the features, let’s see how Easy Video Background WP gets the job done in a test.

The test site, before a background was added.
The test site, before a background was added.

Since I spend lots of time day-dreaming about the beach, I decided it would be nice to use LoungeV Studio’s relaxing YouTube video for my test background. Here is how I set things up:

1. I’m going to make this background site-wide, so I’ll just click on the EasyWPVideo Options screen within WordPress.

Easy Background Video WP Settings Screen
Easy Background Video WP Settings Screen

2. This video is meant to be enjoyed full-screen, so I’ll want to make sure it’s in a fixed position. I’d like it to autostart and mute the sounds (even though I love the sound of waves crashing). Then, it’s just a matter of adding the video’s YouTube ID and saving the settings.

My first try, without using the Overlay feature.
My first try, without using the Overlay feature.

Tip: Video backgrounds mean that you may have to adjust text colors, etc.

3. As you can see, the video looks great but the text is a little hard to read. This would be a great time to check out the plugin’s Overlay feature. I found that using a simple black overlay at 20% opacity looked great and made the text easier to read.

Adding an Overlay.
Adding an Overlay.
The Overlay feature makes text easier to read.
The Overlay feature makes text easier to read.

Video backgrounds provide an interesting way to promote your message. Just imagine going to a travel site with that beach video playing in the background. It certainly makes me want to whip out my credit card and book the next flight to Maui!

Adding this feature to your site is painless when using Easy Video Background WP. Its simple features allow you to be up and running in just a matter of minutes.

Logo_x2_retinaFor more articles, tutorials & free files click here.