Search icon

We use cookies and similar technologies to provide services or features on our website and to understand how you use it. Our cookies don’t identify you personally and they can’t tell who you are. We do not share any of your data with third parties. By clicking "Okay", you consent to the use of cookies. For more information check our Privacy Policy

Okay

Video

Video

All our videos on the site are hosted via a service called Vimeo, but you can embed video from other sources (like Youtube) as you would on any other web site.

Using Video at the Top of an Article


VIMEO



STEP 1

To embed a Vimeo video at the top of your page (above the page title) get the embed code which should look something like the code below. You can find this number at the end of the video title (in this case it is 102465541). Copy this number. Return to the page where you are editing your article and select 'Vimeo' from the 'Video Type' dropdown menu. Now enter the number you copied, in the 'Video ID' field of your article. The video should now appear.

STEP 2

When using a video at the head of the page, we need to supply a small 'thumbnail' image of the video. This will be displayed on category and landing pages. The best approach is to take a screenshot of the video. Then resize the image to be 230px WIDE by 115px HIGH. Its important that these sizes are correct otherwise the image will break the layout. Please note, there's no need to put a play button on the image as this is done automatically by the CMS. To complete this process, attach the thumbnail image to the article, using the same image upload button normally used for attaching the main article image.

<iframe src="//player.vimeo.com/video/102465541" width="620" height="348" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

TIP: To embed a video in the body of your page, simply copy the embed code for the video (it should look similar to the code above) and paste it into your page.


YOUTUBE



STEP 1

To embed a Youtube video at the top of your page (above the page title) get the embed code which should look something like the code below. You can find this number at the end of the video title (in this case it is 102465541). Copy this number. Return to the page where you are editing your article and select 'Youtube' from the 'Video Type' dropdown menu. Now enter the number you copied, in the 'Video ID' field of your article. The video should now appear.

STEP 2

When using a video at the head of the page, we need to supply a small 'thumbnail' image of the video. This will be displayed on category and landing pages. The best approach is to take a screenshot of the video. Then resize the image to be 230px WIDE by 115px HIGH. Its important that these sizes are correct otherwise the image will break the layout. Please note, there's no need to put a play button on the image as this is done automatically by the CMS. To complete this process, attach the thumbnail image to the article, using the same image upload button normally used for attaching the main article image.

<iframe width="620" height="348" src="//www.youtube.com/embed/BU1N2l9Oet4?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>

Using Video in the body of an article


STEP 1

To embed a video in the body of an article, get the embed code which should look something like the code below.

<iframe width="620" height="348" src="//www.youtube.com/embed/BU1N2l9Oet4?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>

You can find this on Youtube and Vimeo pages, by clicking on the heading 'SHARE' and then selecting 'EMBED'.

STEP 2

In the CMS, viewing the article you wish to add the video to, click on the pink boxes icon. This should show a list of 'html elements' you can add to a page. Select 'Video Embed'. This will now paste the following code to your page:

<div> <div style="height:10px;"></div>

<!-- REPLACE THE CODE DIRECTLY BELOW THIS LINE WITH THE EMBED CODE FOR YOUR VIDEO AND MAKE SURE DIMENSIONS ARE 620 WIDTH AND 349 HEIGHT -->

<iframe width="620" height="348" src="//www.youtube.com/embed/BU1N2l9Oet4?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>

<p style="font-weight:normal;font-style:italic;line-height:19px;color:#858486;margin-bottom:12px;">THIS IS WHERE YOUR CAPTION GOES</p>

</div>

Now follow the instructions show here and replace the line which starts 'iFrame' with the embed code you got from Vimeo or Youtube.

STEP 3

Update the parts of the code that specify the width and height. They should say width="620" height="348". If this is already there, leave it as it is.
back to top