School website service training and support logo

School website service training and support

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