Adding Videos to the Classic Builder

There are many reasons to add video content to your landing page. A study by Promo.com explains that using video on landing pages can increase conversions by 80% - 86%.

Videos are valuable because they increase the time people stay on your page, giving your brand message longer to sink in. Video content also mitigates text fatigue from reading lengthy landing page copy & content.

This article describes how to:

• Embed video onto your Unbounce landing page
• Add video backgrounds 

Are you building your page in Smart Builder? See Embedding Videos in Smart Builder to learn more. 

What you will need:

• A video that you've uploaded to a 3rd-party video hosting provider, such as Wistia, Vimeo, or YouTube, and
• An embed code (iframe code format). 

Here is a quick demo to get you started:

Embedding a Video via iFrame

To start, navigate back to your video hosting provider. Within the embed or share settings of the video hosting provider, locate an <iframe> embed code.

Here are the instructions for locating the embed code from YouTube, and an example embed code from YouTube:

1. Copy the embed code of the video you'd like to add to your page.
2. Navigate to page editor in the Classic Builder.  
3. From the Widgets Panel on the left-hand side of the builder, drag and drop the Embed Video  widget onto your page:
   
4. Be sure to place this widget in the space where you'd like the video to appear. 
5. A new dialog box will appear. 
6. Paste the embed code from your video hosting provider into the Embed a Video dialog box: 
7. Click the Save Code button, and you're all set! The embedded video will appear on the landing page. 

You can manually change the size and position of your video by clicking & dragging the video using the resize buttons, allowing you to increase or decrease your video's size to fit the dimensions of your landing page:

Embedding a Wistia Video

The following are steps on how to embed a video from Wistia. 

1. When embedding a Wistia video, ensure the Embed Type is set to "Fallback":
   
2. Copy the embed code from Wistia and navigate to the Classic Builder.
3. Drag and drop the Embed Video  widget onto your page.
4. Once you've pasted in the code, remove any <div> or <script> tags from the embed code, so all that remains are the <iframe> tags:
   
5. Click the blue Save Code button, and you're all set!

Enabling Full-Screen Options for Wistia Videos

When embedding your Wistia video, iframe embeds must contain allowfullscreen attributes for this feature to work. If allowfullscreen attributes are missing, then the fullscreen button will not appear.

You will also need to ensure that the attribute allow=" fullscreen" exists within the code, so that the fullscreen button will appear. See both attributes in the screenshot below:

​​
The fullscreen button will not show on Unbounce popups at this time.

Adding Video Backgrounds

You can easily create a video background for your landing page from a Wistia, Vimeo, or YouTube video link by following these steps:

1. Select the page section to which you want to add a video background.
2. In the Properties Tab on the right side of the Builder.
3. Scroll down to the Background section, and select the Style drop-down menu. Choose the Video option:
   
4. Paste your video URL in the Video URL field and press Enter on your keyboard to save:
   
5. To preview your video background, click the Save button at the top right-hand corner of the screen, then click the Preview button.
6. A new window will open with a preview of your video background. 
7. Back in the Classic Builder, click Publish/Republish your page to implement your changes.

Video Content and the Mobile Experience

Only certain mobile devices can support Adobe Flash-friendly content. To ensure video content works on most devices, avoid using Flash.

Video backgrounds aren't the best experience on mobile devices. When you add a video background to the desktop version of your page, the system will by default display a static image from your video on the mobile version of your page. Therefore, we recommend straying away from background videos for the mobile version of your landing page. 

Instead, switch to the mobile version of your page in the Classic Builder, and change the background style to a solid color, gradient, or another image of your choosing.

Frequently Asked Questions

My background video isn't playing sound. Is this normal? 

Please note that video backgrounds play without sound. Background videos with unsolicited sound can often deflect your page visitors - a better user experience is to remove sound from background videos. 

Why is there white space at the bottom of my Wistia video?

Depending on the video dimensions set during post-production in your video editing software (e.g., video's height and width), you may need to unlock the height dimensions in the Classic Builder to move the aspect ratio more freely. 

1. Click on the embedded video in the Classic Builder.
2. On the right-hand side, navigate to the Properties tab; under the Geometry section, click the padlock icon to unlock the height dimensions:
   
3. Stretch and move the video freely till the white space disappears. 

Glossary

Video attention span rate: generally speaking, viewer engagement will be higher for shorter videos. A 1-minute video, for instance, will have a significantly higher success rate (50% higher) than a 2-minute video. However, this also varies if the comparison is between a 5-minute and a 10-minute video, where the difference in engagement levels out a bit more.

Check out Wistia's resources for more information about video length: Wistia Blog Post: Does Length Matter?