School website service training and support

Video component

Use this guide to add and edit the video component.

Features

The video component displays a video from YouTube, Vimeo or Schools Video (Brightcove Link).

The component:

The size of the video depends on the dimensions you set and the size of the column you nest it in.

Video guidelines

  • It is important that all videos have closed captions, a text component to introduce the video with the title of the video and its duration, and a text component with the transcript linked under it.
  • See how to add a Rich text editor component.
  • Some videos will require an audio description. 
  • Don't rely on YouTube's automatic captioning.

Before you start

  • Navigate to the page where you want to add a video and you are ready to begin. 

Step 1: Add video component

  • Select Drag components here.
  • Select the plus icon.

  • Select Video from the Insert New Component list.

Step 2: Edit the video component

  • Select the Video component.
  • Select the spanner icon to add your video to the page. This is the Configure button. 

Step 3: Edit the video height and width  – optional

The video will stretch to the width of the page by default. 

  • Select the Video component.
  • Select the spanner icon to edit. This is the Configure button. 

  • Enter the Video Height and Video Width.
  • You can also choose to only enter dimensions for one of the fields. The video will keep the correct aspect ratio.

Step 4: Select the video

Option 1: YouTube

  • In the Select Video Source field, select YouTube from the drop-down.

  • Paste the URL of the YouTube video page into the YouTube Link field. Use our get video link from YouTube guide to learn more.
  • Select the tick on the top right of the pop-up to save the video settings.

Example of a YouTube video on a web page:

Option 2: Vimeo

  • In the Select Video Source field, select Vimeo from the drop-down.

  • Paste the URL of the Vimeo video page into the Vimeo Link field. Use our get video link from Vimeo guide to learn more.
  • Select the tick on the top right of the pop-up to save the video settings.

Example of a Vimeo video on a web page:

Option 3: Schools Video (Brightcove Link)

  • In the Select Video Source field, select Schools Video from the drop-down.
  • Paste the URL of the video you uploaded on Brightcove into the Brightcove Link field. Use our get video link from Brigtcove to learn more. 
  • Select the tick on the top right of the pop-up to save the video settings. 

Example of a Schools Video (Brightcove Link) one a webpage:

Publish your changes

  • For changes to be updated on your live school website you will need to publish the page


You may also find useful