Vimeo is a free service that allows you to upload and share video content and is especially good for longer, high-definition videos. Using a HTML fragment you can easily embed a Vimeo video on your site. This guide will explain how to achieve this.
Getting 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. In order to get the embed code, you'll need to click the 'Share' button directly below the video.
Clicking this will give you a pop up with several share options, including 'Embed'.
You can click 'Show options' in order to customise the video which will automatically update the code. Otherwise, simply copy the code in this box.
Adding the embed code to a HTML fragment
Once you have the embed code, you'll need to add this to a HTML fragment.
- Log in to your Create account
- Select "Content" on the Top Menu
- Click "HTML fragments" from the left-hand menu
- Click on the "Add HTML Fragment" green button at the top of the screen.
- 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
- Paste the embed code into the large "HTML Code" box
- Click the "Add HTML Fragment" button
- You will be returned to the "HTML Fragments" screen where your new fragment will now be listed
Adding 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:
- Click on "Content" on the Top Menu
- Click "Edit" (the pencil icon) next to the page you would like to attach the code to.
- Once on the page, click the + icon in the left hand corner to add a block.
- From the Block Selector, choose 'Custom' from the drop down menu.
- You can then drag and drop the Custom Element content block onto the desired place on the page
- Once the Custom Element block has been added to the page, you can click the + icon and use the drop-down menu to select what content you would like to add to the page.
- Select HTML Fragment .
- A placeholder icon will be added to the page and if you click the settings icon, you can specify exactly which HTML fragment that you would like to use.
- Once done, click the 'Save' icon.
You can now preview and/or publish your site to see your video working on your site.