Embedding Vimeo App Into Your Smart Builder Page

One of the many ways to create beautiful and engaging landing pages that capture customers' attention is to add videos representing your brand.

Vimeo is an all-in-one video marketing platform that provides everything you need to create, host, and share high-quality videos. In Smart Builder, it is easy to add videos using the Vimeo App. 

Installing the Vimeo App

1. Navigate to the Apps tab on the left-hand side of Smart Builder.
2. Search and locate the Vimeo App.
3. Click the plus button next to Vimeo to install the app.
4. The Vimeo app will appear in the Add tab in Smart Builder.

You can now drag and drop the Vimeo app anywhere on your page. To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.  

Adding a Vimeo Element to Your Page

Now that you've installed the Vimeo app, you can add a Vimeo element to your page. 

1. Drag and drop a Vimeo element into a section in Smart Builder. 
2. A Vimeo placeholder will appear on your page:
   

Importing a Video

Before you can add a video to your landing page, you will need to copy your Vimeo video URL, which can be found in your Vimeo account via the two locations highlighted in the screenshot below:

If you are adding a video you do not own, check the video's creative commons license to confirm what you can and can't do with someone else's video.

1. Single-click the Vimeo placeholder, and click the Settings icon that appears at the bottom of the element. The Vimeo Settings will appear:
   
2. In the Video Link field, paste the URL of your Vimeo video. This will import the video of your choosing.  

Modifying the Video Size

In Smart Builder, you can modify the Video Size of your video. The sizing options allow you to choose between Responsive or Fixed.

Responsive

The Responsive setting allows for the video to change size based on the type of device that is being used to view your landing page (eg. smartphones, tablets, desktops).

This is also known as a 'wrapper'. Responsive will be the default setting for every new video added:

Fixed

The Fixed setting allows for a specific width and height to be set on the video. The video will remain within these set dimensions no matter what type of device is being used. 

1. To fix the dimensions of a video, select the video of your choice and click the Settings icon at the bottom of the element.

2. Scroll down to the Video Size section and select the Fixed setting.
3. Two fields will appear. In the left-hand field, enter the desired width of your video. In the right-hand field, enter the desired height. Both values are in pixels:
   
4. Select the Apply button to save your changes. 

Take a look at this demo:
 

Modifying the Video Intro

The Intro settings determine what specific type of Vimeo information is displayed over top of your video. 

1. To modify the intro of a video, select the video of your choice and click the Settings icon at the bottom of the element.
2. In the Vimeo Settings window, navigate to the Show section to view the following options:
   • Portrait - the avatar of the Vimeo account where the video originates from
   • Title - the video's title that has been set in Vimeo
   • Byline - the name of the Vimeo creator:
     
3. Select one, two, or all three options to customize an intro for your video.
4. Select the Apply button to save your changes. 

Be sure to Save and Publish your page once you're happy with your changes!