Embedding Vimeo App Into Your Smart Builder Page

Follow

One of the many ways to create beautiful and engaging landing pages that capture customers' attention is to add videos that represent 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. You will see a pop-up that appears, explaining that this App is swappable:
    A pop-up on top of Smart Builder explaining that this App is swappable.
    Learn more about swappable elements in our documentation: Swapping Elements in Smart Builder

Adding a Vimeo Element to Your Page

Now that the Vimeo app is installed, let's try adding a Vimeo element to your page. 

  1. Single-click an element on the page, and click the Swap Element icon that appears at the bottom of the element. A pop-up will appear.
  2. Open the drop-down menu within the pop-up, and scroll down the menu until you find 'Vimeo' in the list.
  3. Select this list item to swap a Vimeo placeholder into your section template. A Vimeo placeholder will appear on your page.

    Gif demonstrating how to swap a Vimeo element into a Smart Builder 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:

Annotated image highlighting where to copy a Vimeo video URL

If you are adding a video that you do not own, be sure to 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 Edit icon that appears at the bottom of the element. A pop-up will appear.

    Annotated image showing where to paste a Vimeo URL in Smart Builder
  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 have the ability to modify the 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.

Gif demonstrating responsive video on a Smart Builder page

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 Edit icon at the bottom of the element.

  2. In the popup that appears, navigate to the 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.

    Annotated image of Smart Builder showing how to fix dimensions for Vimeo videos
  4. Select the Close button to save your changes. 

Take a look at this demo:

Gif demonstrating how a fixed dimension video works in Smart Builder 

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 Edit icon at the bottom of the element.
  2. In the popup that appears, navigate to the Intro 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

      Annotated image of the Smart Builder displaying a full Vimeo video intro
  3. Select one, two, or all three options to customize an intro for your video.
  4. Select the Close button to save your changes. 

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