Follow

How To Embed a Vimeo Video In The Featured Items Header Gallery

This article will show step by step instructions on how to add to embed a Vimeo video in the featured items header gallery. This functionality will be dependant on if your website uses this feature, and an upgraded Vimeo account will also be required. 

Step 1)

First of all, go in to the eCMS, click on the Content tab, and click on the edit link in the Featured Items - Header Gallery section

mceclip4.png

Click on the +Add new option at the bottom of the page, and then select the TextContent box. 

 

mceclip5.png

 

Here you can give the Video a Name, set a Dimension, or give a Custom description. 

mceclip6.png

Once you have done this, we need to add the Source code. To do this click on the Source button. 

mceclip0.png

Adding the source code will be a two part process. First copy the below code and paste it in to the Source field (see above screenshot) 

<div class="vimeoVideoWrapper">
<video autoplay="" height="auto" loop="" muted="" width="100%"><source src=" 
"/></video>
</div>

Step 2)

Now, you will need to login to your Vimeo Account: https://vimeo.com/, and will need the upgrade functionality in order for this to work. Select the video you wish to use, and then on the lefthand side panel, click on Distribution

mceclip0.png

 

 On the lefthand side panel, click on Distribution.

 mceclip3.png

 

 

At the bottom left of the page, you will be presented with Video file links. Click on Copy link.

 mceclip2.png

Now we will return to the eCMS Source code box we were previously in, and we need to paste the Copy link from Step 2, in between:

src=" and "/>

The code should look something like this (obviously the file path will look slightly different, as this will be what's taken from the vimeo mp4 video link)

<div class="vimeoVideoWrapper">
<video autoplay="" height="auto" loop="" muted="" width="100%"><source src="https://player.vimeo.com/external/437088139.hd.mp4?s=ee918952e4991f937d46a691844d473251312847&amp;profile_id=174" /></video>
</div>

mceclip8.png

Finally, add the Cell Class Name. VimeoVideo. Adding this class enables the controls on the Vimeo Video, in this case, the video unmute and video pause icon. (Please note, this Class may differ depending on your website, so please refer to your handout document for this information) 

Click Save, and the Vimeo video will now be playing in the header gallery of your website. 

 

mceclip9.png

 

mceclip10.png

 

 

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk