We’re introducing a page that’s totally game changing. I’d like to introduce you to the video background page. What’s game changing about this is is the technology behind it but also that our rock star friend and developer Chase has made it work its scale on a platform level. This page is just awesome. Here’s this landing page being used with Jeff Walker’s product launch formula launch. Now Jeff is the inventor of the online product launch and this was one of this year’s biggest launches. Here’s what Jeff wrote to his affiliates about this page:

“The overall conversion rate was 53.03 and one JV had a 58% opt-in rate with almost 1000 opt-ins.” Those numbers are huge and this page definitely contributed to them. One of the reasons why this works so well is that the video being used is aspirational and makes people feel really good. We found pages that are inspiring and make people feel good do really. On Jeff Walker’s page, you’ll see all the images are either aspirational, inspirational or just beautiful to look at and the video makes people feel good.

Another reason why this page works so well is that it’s novel and it’s new. People haven’t really seen this type of page before so instead of ignoring because they feel like they’ve seen a million pages just like this, they really focus in on it to see what’s going on. It’s a pattern interrupt. When someone sees opt-in page after opt-in page that are modeled after each other, they all start to look the same and the visitor becomes immune to them. But when someone comes to this page, it interrupts the pattern of similar looking opt-in pages plus there’s movement which your eye is naturally drawn to. It makes the person look, focus and give their attention to the page. It’s really powerful and we think you should try it out.

Let’s take this default video background page that you see here and turn it into this customized video background page with the rolling fields and the big sky. Inside of LeadPages, select a video background page. This page is so powerful but so simple at the same time. Like with all of our templates, you just click on something to edit it. So I’m going to click on the headline and I’m going to add in my copy. Now I need to add my logo and you can select one that you already have uploaded or you can upload a new one here.

Finally, let me add my opt-in form integration. What you do is you select the integration you like then you select the list that you’d like to add people to. Okay. Now the main parts of the page are set up and we need to add a video background. So to edit the video background, click here on dynamic controls. We know that this is a little bit counterintuitive and we’re working to make this easier but for now we’ll edit this video background by clicking on dynamic controls that you see highlighted right here. Okay. This is where you’ll enter in the URL of the video to play on the background of your page. One really cool thing is it if you leave all of these areas blank, you can use a default video and images of the city scene that you can see playing on the background right now.

Now if you don’t want to use a default background video and you’d like to use your own, you can easily do that. Here’s what you’ll have to do if you’d like to use your own video. Step 1 would be to get a video file and upload it to your own hosting. Step 2 is to get a frame from the video file and send it as a background image for browsers that don’t support video backgrounds. Step 3 is to create another image to be used as a static nonvideo background for mobile devices and this image can be derived from the image you used for desktop devices. Now if you don’t have your own video, you can get them very affordably online from places such as iStockPhoto.com, ShutterStock.com, VideoHive.net and you can get some free public domain video footage that might work from Wikimedia comments.

Now I’m going to go through this process of getting a video from iStockPhoto.com but you can use whatever service you’d like to get your videos from. At iStockPhoto.com just click on the video tab and then I’m going to type in time lapse. Now I have a bunch of time lapse videos here to choose from. Now you want to pick something aspirational that will tend to make people feel really good so stuff with sunrises, sunsets, beautiful colors and so on like this one with the big open sky. So I’m going to go ahead and use this one and I’m going to click on the file number here and I’ll be brought to the page where I can buy this video. Okay.

We want to make sure we switch to mp4 format as this is the format that the video has to be in for the background. We recommend that you get the small web because the file size is smaller and it will load faster but you might want to play around with the different sizes and see what works best for you. We’ve found that the small web in many cases works great so I’m going to go ahead and download this. Now once you get the video file, it will be need to be hosted on your own servers for it to play on the background. You have to include a link to an mp4 file. Links to videos from YouTube, Vimeo and so on will not work for the background. You need to link to the actual mp4 file here. So host your video file on your own servers, your Amazon S3 servers or someplace similar for the video background to work properly.

I’m going to upload mine to my Amazon S3 account. Once the video is uploaded, you get the URL and then you come back to your LeadPage and then you paste it in this box right here. So now, if we take a look at the page in a browser like Chrome, you’ll see that the video is working great in the background but what do we do with older browsers like older versions of Internet Explorer and nonstandard browsers like Opera that don’t support video backgrounds?

[0:05:16]
As you can see here, it doesn’t show the vide or anything. What do we do in these cases? For these cases, we suggest you enter a background image URL and this is what’s going to show when you can’t have a video background. So I’ll refresh the page and now you can see that the still image shows instead of nothing. So let me show you how to get the still image to use as your static background for browsers that don’t support the video background. I’m going to be showing you how to get the image to use as a background on your Mac. Now if you don’t use a Mac, you’ll need to figure out how to do all of this on your own computer. If you do use a Mac, you’re in luck but if not the steps will be all the same, you just have to figure out how to do them on whatever platform you’re using.

Ideally, this image will be just the first frame of the video that you use so to get this frame, open the video in either a video player or a video editor and either export to first frame if that’s an option or somehow take a screenshot of the video. I’m going to use QuickTime since it comes on my computer and a lot of you will have this. So open the video we got from iStockPhoto. I’m going to increase the size by 1 and then take a screenshot of it. So to just take a screenshot on the Mac, you shift command and then the number 4. You’ll get the crosshairs and all you do is you drag the crosshairs over the video and it will take a screenshot of the video and the screenshot will be used as the background image for browsers that don’t support video backgrounds.

Then I’ll go to my S3 account and I’ll upload the image and then I’ll get the URL. When it’s done uploading, I’ll come back to my LeadPage and paste it in right here. Once you’ve saved the page, you can go to the URL again in a browser that doesn’t support video backgrounds, you’ll see that I now have a nice looking static image instead of a broken background video.

Now we’re going to do the third and final step which will be to upload an image that will be the static background image for mobile devices like an iPhone, iPad or an Android device that won’t support video backgrounds. So I’ll open the video we got from iStockPhoto in QuickTime again. I’ll go to edit and then copy or I can just hit command C and this will copy the frame that we’re on. Now I could either go to a photo editor like PhotoShop or I could use more stuff that’s already in my computer. I’ll use the preview app since it’s there and it’s free.

So you just open preview and then go to file and select new from clipboard then you can see I now have an image that I can use. If you need to resize the image, you simply go to tools and then adjust size then you can make this image whatever dimensions you need it to be. I found that for mobile images the same size as the video work best since it’s already kind of small and then just save the image. The image we just saved will be used as a background image for mobile browsers that don’t support video backgrounds. From there I need to go upload it to my S3 account and once it’s done uploading, I’ll get that URL and I’ll come back to my LeadPage and paste it in here. Once I’ve saved the page and looked at it on my iPad, you’ll see that we now have a static background image that’s working and ready to go. This template is immediately available for LeadPages customers. If you’d like to customize this for your business, just log in to your account, click on the video background template and you’re all set. If you’re not a LeadPages customer and you’d like to use this template, you can get started by going to LeadPages.net.

The big key is you need to have a *direct URL* to the mp4 video that ends in “.mp4” Wistia doesn’t provide that kind of access to the file, just embed code that interacts with their system.

I’d highly recommend Amazon S3 for this if you don’t already use it. Ridiculously cheap unless you’re running massive volume, and a video on S3 or Amazon Cloudfront would work great. (probably pennies or a few dollars a month for relatively low traffic).

Wistia and EasyWebVideo are video *players*… but our landing page is actually the player for your video. I think it’s easy to confuse linking to a video player with linking to the actual video. In this cause I recommend uploading the file to your server or amazing s3.

Johnn Four

Great feature! Can you put in any static image for older browsers? If so, I’d choose one optimized for the optin rather than using a video frame.

If the person can’t see the video, there’s no reason I can think of to have the image related to the video unless it also happens to be perfect for conversion.

Better yet, in the future maybe non-video enabled visitors get directed to a template you pick as the fallback option.

Steven Mathis

Johnn I definitely agree on the image…might as well use an ideal image for conversions… and as you say without the action of the video, a still may or may not be the best static image to use. Should be no problem to use whatever image you want…whatever URL you put in is going to be the image used.

On the redirect…You can actually do that right now using LeadPages redirects. The way it’s setup I believe what you’d want to do is think about it reverse…you setup the mobile page, then to the mobile page you’d add a redirect to the video background page. You select to redirect the page but NOT redirect mobile traffic. When you send people to that page (the mobile page w/redirect for desktop) they should end up on the right version.

This is one Kickass marketing tool. Questions: How long can the video play and what happens when it’s over? Does it or can it loop? Can you default to a screenshot once the video is done playing? Awesome stuff guys, keep it up.

Hi Brandon… the video should be short and not take long to load (preferably it should be less than 50MB). When the video is over it just loops back to the beginning.

Jennifer Edgar

Hilarious! When I saw Jeff Walker’s page during PFL re-launch – launch — first thing I did was open a new window – log in to leadpages – and check to see if it was a lead-page opt-in….. saw it wasn’t and then thought… uhhh… must be Kajabis new megaphone thingy….. SO GLAD it was actually leadpages… Very well done misters….

Hi Victoria! Thanks so much for stopping by again. And thanks for all of your support here and all over the interwebz.

Victor Bialbatto

While this may be getting results now while it’s novel (mostly because of the “design implies credibility” effect), I’d be prepared to bet that over time this will actually reduce results. Why? Because video catches your eye more than static content. What’s the static content? The actual opt-in form that you want them looking at!

The real next generation of something like this will be video actually integrating with what you want people to do, rather than just being a distraction from it, eg you have video with elements pointing, indicating etc, towards the fields you want filled out using only subtle motion, while the form fields and submit button themselves would actually be much more dramatically presented (also in video, even though they would stay in one place).

Currently, the video is being used in a novel, but inefficient way. I’d be interested to see the results of tests as this approach becomes less novel.

If you are on a PC and you want to get a snapshot from the video, use the VLC media player (it’s a free open source program). Open the file, go to Video > Take Snapshot, and it save the file to your PC. If you need to resize the Snapshot – use either PicMonkey or Pixlr. Hope that helps!

Thanks Kathy. There is no need to be mean. The conversions support it compared to the static one we had. I will continue to test and I am sure we can beat it with something less aweful. Perhaps it works because the image fits the theme of the podcast.

James, on Chrome, OSX I first get the “Authorise DivX plugin” warning before the video plays, since I do not enable all plugins to play automatically. That might put off some people subscribing if the video is DivX encoded.

I love it. Really excellent. Looking forward to using this – in fact I find the more simple the page the better the opt-in and with this visual effect it will create a sense of excitement and interest in our offer.

One question: does the video render on mobile or does mobile throw the static image to replace the video?

Well done – v nice page.

jrfent

This is so cool!

jrfent

Any suggestion on max length of video to use?

Marcin Oniszczuk

I can’t see background video on Windows 8, I have my older computer and windows XP and everything is ok…what I should install to see background video properly?

Zahida A. Khan

love it

Philippe

Great Feature Clay! Any idea where the footage are coming from on Jeff’s page?

Philippe LeCoutre

Great Feature Clay! Do you know where the footage are coming from on Jeff’s video background? Thank you for this awesome tool.

Alfred Quinn

We bought a few “Small Web” videos from iStock based on your recommendation and they all turned out too small and pixelated. So be careful that recommendation isn’t sound.