Update from the Unbounce Team
We’ve officially launched YouTube Video Backgrounds into beta!
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:
Grab the latest version of the script here:
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:
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
- 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!