Click here to check out our Landing Page generator & deploy this video background landing page & squeeze page today.
All right let’s see what LeadPages is up to today.
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?
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.
I’m Jeff Wenberg. Have a great day.