There are many reasons to add video content to your landing page. A study by eyeviewdigital.com shows that using video on landing pages can increase conversion by 80%.
Videos are valuable because they increase the length of 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 background videos
What you will need:
- A video that you've uploaded to a 3rd-party video hosting provider, such as Wistia, Vimeo, or YouTube.
- An embed code (iframe code format).
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 is an example embed code from YouTube:
Copy the embed code, and navigate to the Unbounce builder of the page you'd like to add a video for.
Follow these steps to embed the video onto your landing page:
- From the Widgets Panel on the left-hand side of the builder, drag and drop the Embed Video widget onto your page. Be sure to place this widget in the space where you'd like the video to appear.
- A new dialog box will appear.
- Paste the embed code from your video hosting provider into the Embed a Video dialog box:
- 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
- When embedding a Wistia video, ensure the Embed Type is set to "Fallback":
- Copy the embed code from Wistia and navigate to the Unbounce Builder.
- Drag and drop the Embed Video widget onto your page.
- 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:
- Click the blue Save Code button, and you're all set!
You can test and view embedded videos on the live page only (not in Preview or the builder).
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:
- Select the page section to which you want to add a video background.
- In the Properties Tab on the right side of the Builder.
- Scroll down to the Background section, and select the Style drop-down menu. Choose the Video option:
- Paste your video URL in the Video URL field and press Enter on your keyboard to save:
- To preview your video background, click the Save button at the top right-hand corner of the screen, then click the Preview button.
- A new window will open with a preview of your video background.
- Back in the Builder, click Publish or Republish to publish your page.
- You're done!
Do note that video backgrounds currently do not include sound.
Video Content and the Mobile Experience
Only certain mobile devices can support Adobe Flash-friendly content. To ensure video content works on the majority of 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 builder, and change the background style to a solid color, gradient, or another image of your choosing.
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?