How can I create a YouTube Video Background?


#1

Update from the Unbounce Team :spinbounce:
We’ve officially launched YouTube Video Backgrounds into beta!


Hey everyone!

Here’s a script I put together for those looking for a video background solution. It hasn’t been fully tested so I can’t promise it’s perfect, but it should work for most cases.

This script requires the video be hosted on Youtube. Be sure you own the video or have permission to use it for this purpose.

Here’s a sample page of the script in action:
http://unbouncepages.com/video-background/

Steps:

  1. Grab the latest version of the script here:
    https://gist.github.com/johnnyopao/cb8aa1045dc854fb81aa

  2. Paste the script into your javascript box and set the placement to ’ before body end tag

  3. You’ll need to make some small modifications to the script. Specifically this line:

    lpVideoBG(’#lp-pom-block-9’, ‘2XX5zDThC3U’, 560, 315, 0);

Here’s a quick reference legend of those values:
lpVideoBG( #SectionID’, ‘YoutubeVideoID’, width, height, muted );

Replace #lp-pom-block-9 with the ID of the section you want to apply the video background to. If you want the video be fixed and span across the entire viewport then set this value to #lp-pom-root.

‘2XX5zDThC3U’  is the YouTube Video ID. This can be found in the URL of the Youtube video. For example:

If your YouTube URL is:

https://www.youtube.com/watch?v=vLUNWYt3q1w

Then the ID would be:  vLUNWYt3q1w

‘560’ and ‘315’ are the ‘width’ and ‘height’ of the video. Most standard videos are around this size, but if you know the exact dimensions of your video you can set it here for a better fit.

The last parameter determines whether or not to mute the video. Set this to:

‘0’ for sound
’1’ to mute

  1. Set a background image to the page section. It’s very important you do so. The image will act as a fallback in the event the browser cannot load video backgrounds (like on iPhones).

That’s about it! Again I can’t promise this is perfect so please use it at your own risk.

Should I use video backgrounds?
There is some debate on whether or not video backgrounds have a positive or negative effect on conversion rates. I recommend AB testing a video background variant against a variant that has none.

Be sure to share your AB test results!

Sign up for Unbounce today!


How to add a video background [Implemented]
How to add a video background [Implemented]
How to add a video background [Implemented]
How to add a video background [Implemented]
#2

Outstanding, looks excellent!

Quick question: leaving aside all the reasons why this would be a bad idea, would it be possible to have two videos in two sections?


#3

Thanks Pedro!

It is possible! All you need to do is insert another copy of the line below the existing line of code:

lpVideoBG(’#SectionID’, ‘YoutubeVideoID’, width, height, muted);

Then define the section and video ID as you did with the original line.

But as you mentioned it would not be the best idea :slight_smile:


#4

True, was mainly fro curiosity (2 youtube videos would probably make it quite slow)

outstanding iteration speed btw, great to see you guys grow


#5

Thanks for posting this Johnny. I’m looking forward to testing this one out.


#6

Hi Johnny,
Thats an amazing video, and to me so far it works perfect. But I however have two questions:

  1. In my video, there is a banner that pop-ups in the bottom, is there any way to not have this? (make a paid subscription to Youtube or something else?)
  2. Our site is using the responsive setup in Unbounce, what is the best trick regarding video background on mobile?

Thanks in advance.
// Rikke Pr¾stgŒrd


#7

Hi Jakob,

Johnny’s script already includes the ?modestbranding=1 parameter, which should remove the YouTube logo from the bottom-right. Could you send a screenshot of the banner you’re experiencing? If you’re not comfortable sharing that publicly then feel free to send it over to support@unbounce.com.

The script looks to already handle a responsive page quite well. You might need to play around with the heights of the sections on your Mobile page version (as well as the widths and heights in the script) to get it looking great on both versions of your page, though.


#8

Hi Jakob,

Johnny’s script already includes the ?modestbranding=1 parameter, which should remove the YouTube logo from the bottom-right. Could you send a screenshot of the banner you’re experiencing? If you’re not comfortable sharing that publicly then feel free to send it over to support@unbounce.com.

The script looks to already handle a responsive page quite well. You might need to play around with the heights of the sections on your Mobile page version (as well as the widths and heights in the script) to get it looking great on both versions of your page, though.


#9

Hey Jakob!

Just wanted to add to what Mark already mentioned.

  1. If you are monetizing your videos then your embedded videos will also contain the same ads/banners. Which is why it’s best to upload (or re-upload a duplicate) video specifically for this purpose that isn’t connected to adsense or any other Youtube monetization services.

  2. If the video can be auto-played the video background will display and scale accordingly. If the mobile device cannot support the video background then the feature is not loaded and completely hidden.


#10

Hi Mark and Johnny,
Thanks for the helpful reply. This feature is really cool!

I however have trouble with displaying my video in Firefox (and probably also Internet Explore) although it works in Safari and Crome.
Would you know why this could be and how to solve it?

Thanks in advance!


#11

Hey Jakob

Looks like the script has some issues with Windows Firefox and IE. I can’t promise a solution right away, but i’ll dig in and update you here with any updates!

Thanks for pointing this out!


#12

Hey Jakob!

I actually did further testing (I initially tested the page using a remote service) and it appears to work on both Windows Firefox and IE.

I’ll shoot you a email so I can take a look at your page personally


#13

Hey everyone

Jakob pointed out a bug where the video background did not show on some browsers.

I’ve applied some changes to fix this issue. You can find the updated script in the same github page

https://gist.github.com/johnnyopao/cb…


#14

In old versions of Internet Explorer (8 and below) if Flash is not enabled, there is a pretty nasty error message displayed by Youtube.

I created a fallback for this problem using conditional comments:
https://gist.github.com/philbar/b5dba…


#15

I also took the first frame of the video and made it the background image so it looks like the video loads fast and will be a fallback in case the video doesn’t load.

You need to make sure the image is as small (file size, not dimensions) as possible. Try compressor.io,ImageOptim (Mac) or Riot (Windows).

Also be sure to add “background-size:cover;” to the CSS to make sure the image is the same size as the video. This will ensure a seamless experience.


#16

Thanks for all the great suggestions/improvements Phillip!


#17

it looks like the video will not play on mobile devices is that right or should I try something other than what you mentioned above? I added the same javascript to the mobile version.


#18

Hey Greg

The reason why it likely won’t play in mobile devices is because some smartphones restrict videos from ‘autoplaying’. iPhones are a major example of this. This is why it’s best to have a image in the background as a fallback. In the event the video cannot play the image behind it will be displayed instead.


#19

Hi Johnny, I would like to do this with a .webm format video. Can you let me know what changes will be needed to your script to handle this?


#20

Hey Andy

This solution revolves pretty heavily around using Youtube. However it can be done provided you do have the javascript chops to do so. Here’s the non-minified version:

https://gist.github.com/johnnyopao/3955498aee461c4b3e75

Mainly you’ll want to strip out anything that has to do with youtubes javascript API. Then where it appends the youtube iframe you’ll append your