Using video in your Plone website

The University's website is not ideally suited for serving videos so it is not usually recommended that you upload videos directly to Plone. Instead you should upload your videos to a professional video hosting/streaming service, such as YouTube, and then add a link to the video from, or embed the video into, your webpage.

Embedding YouTube videos into Plone pages

  1. Copy the embed code
  2. Paste the embed code into your page
  3. Positioning videos

Copy the embed code

Since these instructions were written YouTube may have changed their website. Therefore you may notice some slight differences and the steps outlined below may not be entirely accurate.

The first step is to go to the video on YouTube and copy the embed code.

  • Go to the video on YouTube
  • Below the video, click the Share button
  • Click the Embed button
  • (Optional) Deselect the box which reads 'Show suggested videos when the video finishes'
  • In the Custom box enter the width in pixels that you would like the video to be.

The default size of the video will most likely be too large for your Plone page so enter a new width value for your video in pixels. Somewhere between 340 to 540 pixels will be suitable in most cases. Entering 540 will make the video fit the entire width of a three column page. YouTube will set the height value for you and adjust the embed code accordingly.

  • Copy the embed code. The easiest way is to highlight it with your mouse,  right click on the code and select Copy.

 

YouTube embed code

 

Paste the embed code into your page

After you've copied the video's embed code from YouTube you need to paste it into your webpage.

  • Login to Plone
  • Go to your webpage
  • Click the Edit tab
  • Click the HTML button to open the HTML editor
  • Find the location on the page where you'd like your video to appear and paste in the embed code
  • Click the Update button to close the HTML editor
  • Save the page

Positioning videos

It is possible to position a video to either the left or right hand side of a webpage with text flowing around it.To do this you have to adjust the YouTube embed code slightly by adding class="image-right" or class="image-left" as in the example below.

<iframe class="image-right" width="540" height="304" src="//www.youtube.com/embed/71X3DlTtRVM?list=PLDB0A3A2BD781C1E5" frameborder="0" allowfullscreen></iframe>

If you have difficulties with this then please contact a member of the Web Team by emailing ithelp@le.ac.uk

Share this page: