A big hurdle most website owners are faced with is keeping their visitors and prospects engaged long enough for them to take an action.

You literally have seconds to keep the person from clicking away if they don’t see images or headlines that answer their questions or your site doesn’t load fast enough.

Your visitors need help and advice, which is the main reason why they search for information and find your site in the first place.

Anything that causes them to lose focus will result in either going somewhere else or simply leaving your website entirely.

There are many solutions to try and alleviate this dilemma. The most recent one has been personalisation and letting prospective customers get a sense of realness and human interaction behind your business.

One of the ways this has been applied is through video and providing a window into your business. This includes YouTube videos, vlogging, Snapchat and Instagram stories where business owners can film behind the scenes of their business.

Here are 3 good reasons to use video:

  1. It allows your prospects to develop trust in you.
  2. It builds a connection, authority to your message or story.
  3. It allows them to visually see the ‘end state’ or goal they would like to achieve.

The 3rd point is especially important. If a prospect or customer can visualise or see the end result that they would like to achieve, there’s a higher chance it leads them to your desired action.

This is all the more powerful if they can get to see it in video form.

What we have done here at OptimizePress is added further functionality to our toolkit to allow our customers to apply more video to their own landing pages, sales pages and websites.

In this article, we’re going to highlight what this key feature is, how other businesses are successfully deploying it and show you how you can do it step-by-step inside the OptimizePress LiveEditor.

Introducing Video Backgrounds

Video Backgrounds have been all the rage in the last few years and was first introduced as a way to animate the page, make it dynamic and increase customer engagement. There have been many ways this has been put to use, with the most common one being giving prospects a window to the ‘ideal state’ they would like to be in.

A powerful tactic to influence your prospects and get them to do what you would like them to do.

To help better illustrate, we’ll now highlight a few case-studies of businesses that are putting video to good use.

Case-Study #1: Activity


Types of Video Backgrounds for Landing Pages | Shutterstock Activity Video Stock

Shutter is a royalty free resource for providing images and video for web owners to use on their websites. Here’s a great example where video is used to showcase a few of their videos that they have on offer. The purpose is to show customers how video can be used on their websites, which is a great and compelling way to get prospective customers to buy.

Case-Study #2: Product Demo


Types of Video Backgrounds for Landing Pages | Phillips Product Demo

This a great example that showcases a product being used by other customers. Phillips uses video perfectly by combining an effective claim (“This is not a shaver”) with actual evidence.

It effectively ‘kills 2 birds with one stone’ by building authority, social proof, credibility and proof of claim all in one small section of their page, and all with the use of one powerful video. Again, an excellent example of how video backgrounds can be used effectively

Case-Study #3: Landscape


Types of Video Backgrounds for Landing Pages | YCO Landscape Video Stock

If you have an established business that involved any form of traveling or compelling landscapes, then videos of happy people living their life is a great opportunity to help illustrate the type of experience your business will provide if your visitors take action.

In this example, the service offers the opportunity to explore yachting and showing this using the most compelling way possible. Again, further demonstrating how effective video backgrounds can be for your business when used correctly.

Case-Study #4 – Workspace


Types of Video Backgrounds for Landing Pages | Toggle Workspace Video Stock

Toggle provides flexible tracking ability for all aspects of the business and uses background video in a novel way in order to emphasise the humour whilst illustrating the message of what service the business provides.

In your business, think about what type of video you would like to use that best illustrates what it is you’re providing for your customers.

How To Create Video Backgrounds Using OptimizePress PlusPack

Please Note: You must be using OptimizePress version 2.5.7 or above for PlusPack features to function correctly.

The OptimizePress PlusPack is a special plugin that is available as part of our Publisher & Pro account packages.

You can find full details about how to purchase an upgrade for your account within the members area – just click through to “License Your Site” and scroll down for upgrade options

Already using OptimizePress? Click here to login to the Members Hub

Using the Video Background settings, you will now be able to insert full videos that will animate on your page. These can be used for either full-screen background or specific row backgrounds. Ideal for enticing your visitors and keeping them engaged.

– To get started, hover over your row and click on the ‘Small Pencil‘ icon to launch the row settings window. Scrolling down, you will now see a new section dedicated to Background Video.

Types of Video Backgrounds for Landing Pages | Background Video Row Options

– Your first option will be to select a ‘Video Type‘. You will have the choice to choose either ‘Youtube‘ or a custom ‘URL‘, which is ideal if you prefer to select one of your self-hosted videos using either Amazon S3 or other hosted service.

Please Note: for the custom URL file type, you will only be able to upload videos containing the following file extensions: .mp4, .webm or .ogv

– In our example, we will be choosing ‘Youtube‘ as our video type.

– You will first need to head over to Youtube and copy the URL of the video you would like to use by clicking on the ‘Share‘ link and copying the URL below.

Types of Video Backgrounds for Landing Pages | Copy Youtube Video Link

– Once you’ve pasted in the Youtube link in the required fields. You will then be given the option to set the aspect ratio of the video. By default, Youtube will set the aspect ratio to 560px(width) x 315px(height).

– If you would like to change the aspect ratio, we recommend using the recommended Youtube dimensions by referring to the share area in Youtube and looking at the aspect ratio selections.

Types of Video Backgrounds for Landing Pages | Set Youtube Video Resolution

– Once you’ve set your video and the dimensions you require, you will now have a list of other options to further customise your videos:

  • Video Overlay Color – Select a colour you would like to use to overlay your video. This is ideal for providing a tint or colourful gloss over your videos.
  • Video Overlay Opacity (Percentage) – Select how prominent you would like the overlay to appear over your video. The higher the percentage, the stronger the clarity.
  • Video Overlay Image – Select an image to display on top of your video. Ideal for creating reflection effects.
  • Video Overlay Image Position (Tile, Cover, Stretch, Center) – Select how you would like the overlay image to be positioned.
  • Alternative Image For Mobile Devices – Select an image to display exclusively on mobile devices.
  • Mute Video – Choose to either keep or mute the audio contained in the video. Our testing shows that in most niche scenarios muted audio is more effective.
  • Full Page Video – Select whether you would like the video Background to occupy the entire page and not just the row.

– Once everything is set, click the ‘Update’ button to add the Video Background element to your page. To confirm that the LiveEditor has added the element, look for the ‘Play’ icon in the top left corner of the row.

Types of Video Backgrounds for Landing Pages | Insert Youtube Video Element

– Save the changes and preview your page. Your Background Animation should now appear live on your page.
We recommend playing with the different settings to see how it affects your videos and to see what’s possible.
Here’s a video background using a Video Overlay Color of blue with a Video Overlay Opacity of 50%:

Types of Video Backgrounds for Landing Pages | Preview Background Video

Please Note: It is important to remember that an effective video background file should be formatted and compressed correctly for playing online. Huge HD video files might look great playing on your display but may not stream nicely for visitors to your site.

Have you enjoyed this article? Please leave your comments below and tell us your thoughts.

Onder Hassan
Onder Hassan

Onder is a Digital Marketing Specialist here at OptimizePress. In addition to developing content, he also assists with the research and development of deployable marketing strategies. If he’s not doing marketing, you may also find him buried in a marketing textbook.

    16 replies to "4 Types Of Video Backgrounds For Landing Pages"

    • Rogério

      Great article. I was reluctant to use videos on my blog to increase the user’s downtime, but I just realized how much I lost in that time when I did not do it. Thank you very much for the tips.

      • Onder Hassan

        You bet Rogério,

        Thank you for reading!

    • Juve

      Are the video backgrounds on landing pages also optimizes for mobile?

      • David Frosdick

        No. For mobile we fall back to an image or the row colour.

    • Mychael jean-todd

      Can these video backgrounds be used for my step1and2.com/lp/

    • Khalid

      Will using video slow down my website loading time? Thanks

      By the way, great article as always Onder. Really helpful, it’s like you know I’m gonna use this next year ;-)

      • Onder Hassan

        Hi Khalid,

        If you’re self-hosting your videos, then yes it will use up your server bandwidth. So we generally recommend using a third-party solution like Youtube, Vimeo and Amazon S3.

        We hope this answers your question. Thank you for reading!

    • richard

      How can I upgrade to plus package? I can’t find the purchase links……

    • Kristen Schwab

      How can I add a video to a row that will only show on mobile? If the background video won’t play on mobile, which I know is common, I still want my mobile visitors to see the video.

      • David Frosdick

        You could try making the video a GIF and that should then play on mobile.

    • Jessica

      A video background is a good prospect for audience engagement. An appealing video always enhances conversion rate which gives growth to site’s traffic. If I use the free version of OptimizePress can I upload videos from YouTube?

    • Troy Austria

      question: can you have the videos work on mobile instead of a static image? please e-mail me back if you have the ability to make that work. I’m not worried about other people’s bandwidth, most people use facebook, youtube, and instagram so it should be able to work on websites as well.

      • David Frosdick

        Hey Troy. That’s not possible right now. Most video background tools use a mobile fallback image.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.