How to Add a Video Background to Your WordPress Site in 4 Easy Steps

Imagine going to a website with a large “hero” image in the header. Looks great, huh? Large images can make your site look amazing, but they don’t really do anything to grab your visitor’s attention other than sitting there and looking cool. You want to really grab their attention and hang on to it? A video background ought to do it.

One of the most popular trends in web design is videos that play in the background. Browsers can play background video using either the HTML5 <video> tag or the H.264 format. They can run independently and automatically. You can manipulate and control them just like any other page element. Video backgrounds can make your website look snazzy and stand out from the crowd.

Adding a video background to your WordPress website doesn’t have to be daunting. Here’s a look at just how simple it can be. Using these four easy steps, anyone can add video backgrounds to their WordPress website, fast.

Step 1: Choose Your Source for Videos

You can either use your own videos and format and host them yourself, pull them from sources such as YouTube and Vimeo or use stock videos. Most integrated video players will use either method.

Here are a few good places to get stock videos:

• Dissolve

  

  Dissolve has over 600,000 stock videos in 24 different categories that you can use on your website. They include both premium and free video clips. They will even help you find what you’re looking for based on your shot-list, script, or concept. Prices start at $50 per clip.

• iStock

  

  iStock from Getty Images includes high definition and stock videos in 21 categories. They are royalty-free and you can buy them individually or as part of a subscription. Prices start at $60.

• ShutterStock

  

  ShutterStock has almost 3 million royalty-free stock videos in 28 categories. You can buy them individually or with a pack. Prices start at $19.

Step 2: Convert Your Videos to the Proper Size and Format

When considering file size keep in mind that there are still lots of people with slower connections – especially those in rural areas. You need to determine your target audience and set your file size to that audience. Encode your video to a lower bitrate than the connection speed of your target audience. You can reduce the file size by either reducing the bitrate or the duration of the video. Your videos should look great and play smoothly. It is better to have nice videos that are short than large videos that won’t load.

Step 3:  Choose Your Video Player

There are several options for playing the videos. You can encode the video into your site by hand or you can use a plugin. You want a player that’s responsive and gives you features so you can set up playback that works best for your audience.

HTML5, CSS and JavaScript

The advantages of coding with HTML5, CSS, and JS is it’s lightweight, it’s responsive, you can style it like any element, and you test for browsers and show an alternate image for browsers that don’t support video playback (such as IE and Opera).

Here’s a look at code from New Media Campaigns.

Markup

First build a container for JavaScript to use:

This includes two images: 1 as the placeholder from the first frame in the video, and the alternate image.

Scripts

This code tests for the browser:

If the requirements for the video are met, the video will be called. If not, the alternate image will be called. It also tests for window resolution and whether or not the device is an iPad. You can test for any parameters you want.

CSS

You can style the markup using CSS. It’s used to set the size of the container instead of allowing it to scale from the <img> or <video> tag. This way the page is drawn before the element loads. This will also set the height scale with the width and maintain the aspect ratio.

Plugins

Another option is to use a plugin. Here’s a quick look at a few plugins that will do the trick.

• Image & Video FullScreen Background WordPress Plugin

  

  This premium plugin provides an image background slider, video background, multimedia gallery, and a video gallery, and it will display them full-screen. It’s compatible with mobile devices (without autoplay). It comes with two skins and two styles, has animated text, two transitions, allows for links on each slide, and allows you to place a texture over images. It will play both YouTube and Vimeo videos. It has over 40 parameters that you can adjust.

  The Regular license is $17 for use by you or one client, in a single end product which end users are not charged for. The Extended license is $85 for use by you or one client, in a single end product which end users can be charged for.

• Video Player & FullScreen Video Bgd. - WP Plugin

  

  This premium plugin will play videos that are self-hosted as well as Vimeo and YouTube. It will display them in full width, fixed width, and full screen. You can place a texture over the video. It’s mobile compatible (with autoplay turned off). It has over 30 parameters that you can adjust and it’s very lightweight.

  The Regular license is $16 for use by you or one client, in a single end product which end users are not charged for. The Extended license is $80 for use by you or one client, in a single end product which end users can be charged for.

• mb.YTPlayer for background videos

  

  This one will use any video from YouTube as a video in the background of your website’s homepage, or any page or post. It uses the YouTube iframe API and displays the video using the HTML5 VIDEO tag.

  It’s easy to use. You give it the URL of the video, choose the type of page to display the video on, set opacity, quality, remove ads (if you own the video), tell exactly where in the video it should start and stop, set the audio, choose to loop the video, etc. It’s placed on pages and posts using a short code and it lets you add a fallback image for mobile devices.

Step 4: Set Up Your Video

Now that you have your videos set to the proper file type and size and your video player set up and ready to go, it’s time to upload your video and point your player to it. If you’re pointing a plugin to a URL to play a video then the adjustments and setup will be similar. You’ll need to make some decisions about how and where the video works.Your choices are:

• Autoplay. This is the most common setting. The video should start playing automatically after everything else loads.

• Loop. Will the video loop and play continuously? If so, watch the video and specifically choose the best place for the video to start and stop. It should look natural. The process of looping shouldn’t draw attention to itself.
• Audio. I don’t recommend having sound to automatically play. Allow users to turn sound on if they want it. Sound takes up extra bandwidth and places a heavier load on your visitor’s browser. Also, it’s best not to assume they want to hear it.
• Show image. If the browser isn’t compatible, then it should show an alternate image. This keeps your site from looking broken.

Wrapping Up

Video backgrounds can make your site stand out and capture the attention of your readers. It isn’t difficult to add this feature to your WordPress website. With the right video and the right player, your website can go from great to amazing.