How to embed videos

Applies to: Plone, T4 Site Manager
Last updated: 02/10/2017
Summary: How to embed videos using YouTube or an Apache media folder.

Before you start

  • Any video hosted on a University website or YouTube channel must include a subtitle/caption file.
  • For correct video file formats, refer to the video-production guidelines.

YouTube

To embed YouTube videos and playlists, please refer to the YouTube help pages.

Apache media folder

Single video

If you have an Apache media folder you can upload video files there, and then embed them on web pages.

To embed a single video, make sure the video is in the correct format (see video-production guidelines) and in the same Apache media folder as a .jpg image and .srt subtitle/caption.

  1. Ensure video, image and .srt file have web-safe names, eg all lowercase, no spaces or special characters
  2. The .jpg image should be a representative still from the video and the same dimensions as the video
  3. Upload video, image and .srt files to your Apache media folder
  4. Open the HTML view of the page where you want the video to appear
  5. Add the code below making sure you update the path to the correct video, .jpg and .srt files
  6. In the video code make the height attribute 24 pixels higher than the actual video/image height, to take account of the play menu at the bottom of the video. In this example the video/image is 560 x 315 pixels, so the height attribute is 339. If you don't add 24 pixels the video player will have black bars on each side.
  7. Contact us so we can add an ‘additional head’ content block containing the necessary script.

A single video at 560 px wide will fit in a column grid_8.

<div  class="videoContainer">
  <video
    src="/university/media/style-guide/earth-sciences-60-secs.mp4" 
    width="560" 
    height="339" 
    poster="/university/media/style-guide/earth-sciences-60-secs.jpg"
    title="Earth Sciences in 60 seconds">
	<track src="/university/media/style-guide/earth-sciences-60-secs.srt" kind="subtitles" srclang="en" label="English">
	Your device doesn't support direct playback.  
    Please <a href="/university/media/style-guide/earth-sciences-60-secs.mp4">
    download the video (MP4)</a> instead.
  </video>
</div>

Other video platforms

If the video platform you are using is not listed here, please contact us. If it is another third-party service, eg Vimeo, you may need to refer to that service's own help section.