Vimeo Element

12/03/2019

Adding a Vimeo video to your website has never been easier thanks to the Fusion Builder Vimeo Element. Just add the vimeo video ID and away you go. It’s even got built in responsive features, so you don’t have to worry about the size of your videos! Read below to discover more about the Vimeo Element!

View More Examples!

How To Use The Vimeo Element

Adding a Vimeo video to your content couldn’t be easier with the Fusion Builder Vimeo Element.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the video.

Step 3 – Click on the + Element button at the bottom of the column. Select Vimeo.

Step 4 – Now you have the options window open. The first and most important step is to place the Vimeo video ID into the Video ID field. This is the  the end section of the url; for example the Video ID for https://vimeo.com/75230326 is 75230326.

Step 5 – In the Alignment field, you can choose the alignment of the video in the column you are placing it in.

Step 6 – The dimensions of the video are next. This is in pixels, but you just enter a number. Vimeo videos do not force an aspect ratio, however the most common one is 16:9. When entering the dimensions with this element, the only really important one is the width. The video will display at its native aspect ratio.

Step 7 – There are a couple more options you can select. One is Autoplay, which by default is set to No, as it’s generally not considered good Netiquette for videos to autoplay, and there is an option for additional API parameters. The most common of these is &rel=0, which will disable related videos at the end of the video playing. Once you have finished with the options, simply click save and the video will be inserted into your page.

Step 8 – If you preview your page, you will see the video as you have styled it.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements, you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

  • Video ID – Enter the Vimeo video ID. For example, the Video ID for https://vimeo.com/75230326 is 75230326.

  • Alignment – Select the video’s alignment. Choose from Text Flow, Left, Center, or Right.

  • Dimensions – In pixels but only enter a number, ex: 600.

  • Autoplay Video – Set to yes to make video autoplay.

  • Additional API Parameter – Use additional API parameter, for example &rel=0 to disable related videos.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

View The Options Screen

Global Options

There are no Global Options for the Vimeo Element.

Vimeo Element Parameters

Copy to Clipboard
        • id – The Video ID of the video you want to insert. For example, the Video ID for https://vimeo.com/75230326 is 75230326.
        • alignment – Set the alignment of your video. Leave empty to use the text flow, or set as left, center or right.
        • width – Accepts a pixel or percentage value. For example, 1px, or 50%. Sets video width. Leave Blank for Full Width.
        • height – Accepts a pixel or percentage value. For example, 1px, or 50%. Sets video height. Leave Blank for Full Height.
        • autoplay – Choose from yes, or no. This will enable or disable autoplay.
        • api_params – Any additional vimeo video parameter option. To view the parameters Vimeo offers, follow this link.

        • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
        • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.