Adding Video

Follow

There are many reasons to add a little video lovin' 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. On top of that, if you feature yourself or company employees in the video, trust factor is raised significantly. And let's not forget, on the internet people are lazy and much prefer watching to reading.

This article will help you out with:

  • Embedding video onto your Unbounce landing page


Embedding Video

To add a video to your landing page you'll need to host your video using a 3rd-party video player. The video player should provide you with an <iframe> code that you'll use to complete this 3 step process.

To embed video on your landing page:

  1. Drag and drop the Embed Video embed-video.png Widget from the panel on the left to the area of your page where you want your video to the appear. A new dialog box will appear. 
  2. Paste the embed code from your video provider into the Embed Video dialog box. 
  3. Click the Save Code button. 

Note: Remember not use Flash if you want your video to be widely viewable on mobile.

Note: An embedded video cannot be set to full screen in Preview mode.

Note: When embedding a Wistia video, ensure your Embed Type is "Fallback":

fallback_wistia_embed_code.png

Your Wistia embed code will look something like this:

<iframe src="//fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency="true" 
frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed"
allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen
msallowfullscreen width="620" height="349"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

Use only the code within the <iframe> tags. So remove any code within <script> tags, and you'll be all set!

Select (single click) the video to bring up its Properties Pane on the right:

Geometry

Manually change the size and position of your video.

Content

Click "Edit Code" to adjust the code you inputted.


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:

Note: Video backgrounds currently do not include sound. 
Note: Video backgrounds aren't a good experience on mobile. 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. If you want more control over this, switch to the mobile version of your page and change the background style to solid colour, gradient, or another image of your choosing.
  1. Select the page section to which you want to add a video background.
  2. In the Properties panel on the right side of the Builder, select the "Style" drop-down menu in the "Background" section and select the "Video"option. 
  3. background-video.png
  4. Paste your video URL in the Video URL field and press "Enter" on your keyboard.
  5. video-background-url.png
  6. To check out what your video background will look like, 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. 
  7. Back in the Builder, click "Publish"/"Republish" to publish your page.
  8. You're done!

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 two minute video. However, this also varies if the comparison is between a 5minute and a 10minute video, where the difference in engagement levels out a bit more. Check out Wistia's resources below for more information about video length.

Wistia Blog Post: Does Length Matter?


Was this article helpful?
9 out of 34 found this helpful