Help Centre

Support > Designing and Building Your Website > Adding Your Content

How to add a Vimeo video to your site

Vimeo Homescreen


What Is Vimeo?

Vimeo is a free service that allows you to upload and share video content. It is especially good for longer, high-definition videos.

Their platform uses HTML5 which enables them to host your video content at the highest quality with the fastest loading times available. This means that you can display your videos anywhere and they will perform at their best regardless of where they are viewed from.

They offer a completely free package as part of their service. However, a premium package offers support, upgraded storage and a vast array of customisation and interaction tools to take your videos to the next level, without any advertisements interfering with your audience’s experience, making it the choice alternative to YouTube for professional videographers.

Using a HTML fragment you can easily embed a Vimeo video on your site. This guide will explain how to achieve this:

 

How to get the embed code from Vimeo

Embedding allows you to add a video directly to your site content. This is done using a short HTML code which can be taken from any Vimeo video. 

To get a Vimeo embed code:

  1. Click the Share button directly below the video you’d like to embed on your site.

Sharing a video from Vimeo

  1. Click + Show Options on the right-hand side of the Embed section.

Vimeo's Share Options

  1. Select Responsive within the Size option.

Advanced Sharing Options on Vimeo

  1. Customise the rest of the options to your preference.

  2. Copy the code within the Embed box.

 

How to add the embed code to a HTML fragment

Once you have the embed code, you'll need to add this to an HTML fragment.

  1. Log in to your Create account.

  2. Select Content on the Top Menu.

  3. Click HTML fragments from the left-hand menu.

  4. Click on the Add HTML Fragment green button at the top of the screen.

  5. In the Description box, enter something descriptive so that you know what the HTML code is for or what it does. This is just for your reference and will not appear on your site.

  6. Paste the embed code into the large HTML Code box.

Creating A HTML Fragment

  1. Click the Add HTML Fragment button.

You will be returned to the HTML Fragments screen where your new fragment will now be listed.

 

How to add the Vimeo video to a page

Once you have created the HTML fragment with the video, you will need to insert it onto one of the pages of your website. To do this, take the following steps:

  1. Click on Content on the Top Menu.

  2. Click Edit (the pencil icon) next to the page you would like to attach the code to.

  3. Once on the page, click the + icon in the left hand corner to add a block.

  4. From the Block Selector, choose Custom from the drop down menu.

  5. You can then drag and drop the Custom Element content block onto the desired place on the page.

Placing a Custom Element Placeholder

  1. Once the Custom Element block has been added to the page, you can click the + icon above the placeholder and use the drop-down menu to select what content you would like to add to the page.

  2. Select HTML Fragment.

Adding A HTML Fragment

  1. A placeholder icon will be added to the page and if you click the settings icon, you can specify exactly which HTML fragment you would like to use.

Completed HTML Fragment

  1. Once done, click the Save icon.

You can now preview and/or publish your site to see your video working on your page.

More Questions?

If you have any further questions, please get in touch and we will be happy to help.

Get in Touch