Skip to main content Skip to navigation

Add video clips

You can embed videos in a SiteBuilder page, either stored in SiteBuilder or hosted on YouTube.

If you're uploading video to SiteBuilder, we recommend the H.264 MP4 file format for video, as it's compatible with the majority of web browsers and devices.

Important: Accessibility legislation dictates that for videos published from 23 September 2020 on the Warwick website, you must provide:

  • Captions of audio content, including what is said, who is speaking and non-speech information conveyed through sound. It is also good practice to provide a separate transcript.
  • An audio description of what is conveyed visually, including information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track. For new videos, the easiest way to achieve this is to integrate description into what is said in the video. Another option is to provide a separate described video. The SiteBuilder video player does not currently support text-based audio description that is read aloud or a separate audio track for the description. Note that for videos with no audio, you can instead provide a full transcript describing the visual information conveyed.

The above applies unless the video is an alternative for text, and labelled as such. It also applies to videos of live events if they are available for more than 14 days. If you make changes to a page containing a video that was published before 23 September 2020, you should also provide the above.

In this article:

Add a video clip to a Components Editor page

  1. Browse to the page where you want to add a video clip.

  2. Go to Edit > Edit centre content.

  3. Place your cursor in the page where you want to insert the video.

  4. Select Presentation > Audio/video:

    The Components Editor 'Add images/media' menu, with the 'Audio/video' option highlighted

    Alternatively, to edit the properties of an existing video, select it in the editor, then select Settings in the component toolbar:

    The component toolbar for an audio/video component, with the 'Settings' option highlighted

  5. The Add or change a media file (video or audio) pop-up appears:

    The 'Add or change a media file (video or audio)' pop-up

  6. Specify the video file you want to add to the page by doing one of the following:

    • Enter the URL of the file you want to use in the Media file URL box. This can be a file on SiteBuilder, or a video hosted on another site or platform.

    • Select the magnifying glass button next to the Media file URL box to specify a video file that's already uploaded to your site.

    • Drag and drop the file from your computer into the dotted-line box.

    • Select Browse in the dotted-line box to locate the video file on your computer and upload it.

    • Select the video file under Recently uploaded files, if it is present.

    When you upload or select a video file, SiteBuilder displays additional video-specific settings:

    SiteBuilder's video-specific settings

  7. Optionally allow visitors to download your video file by selecting the Provide a link to download the file checkbox.

  8. If you want your video to Autoplay or Loop, select the relevant checkboxes. These options will only apply for users who have not chosen reduced motion in their system settings.

  9. Use the Relative size drop-down list to choose what size the video will appear on your page.

    Note: The size you select is relative to the container the video component is placed in. If the video is placed inside a block that's narrower than your page, selecting a size of 6/12, for example, will display the video at half the width of that block.

  10. Select the video's Position on the page.

  11. Use one of the the Add caption file options to associate a .vtt file containing captions for the video. These options work just like locating the video file, above.

    Important: Accessibility legislation requires captions of audio content, including what is said, who is speaking and non-speech information conveyed through sound. Ensure these captions are available and accurate (automatically generated captions generally require some editing) on any media-sharing service you are using, or generate your own captions.

    If the video does not use sound to convey information, select the This video conveys no information through sound checkbox.

  12. Use the Preview image (optional) settings to specify a preview image for the video, if required. These options work just like locating the video file, above.

  13. Select Add media file.

  14. The Audio/video component is placed on your page, and you can reposition it as required.

  15. When you've finished editing your page, select Publish.

Upload a video to the Files tab

To upload a video as a separate step, rather than uploading and adding ot to your page at the same time:

  1. Browse to the page where you want to add a video.

  2. Go to Edit > More, then select the Files tab.

  3. In the toolbar, select Upload:

    The SiteBuilder 'Files' tab, with the 'Upload' button highlighted

  4. If your video is not a suitable file format for the web – for example, FLV, AVI or MOV – you may see the following message:

    The file your-video.mov is a proprietary video format.

    These files are generally unsuitable for embedding in web pages because of their large file sizes, which means they take a long time to download. Not all web browsers will be able to play videos of this type and playback is generally unreliable.

    It is recommended that the file is converted to an H.264 (Video) file, which will generally reduce the file size and increase the range of devices which can play the video.

    You have three options:

Convert a video to H.264 MP4 format in SiteBuilder

  1. If the video uploaded to the Files tab is not already in MP4 format, you need to convert it. This ensures that the video plays in the majority of web browsers and devices. Select the video on the Files tab, then select the Convert button:

    The SiteBuilder 'Files' tab, with the 'Convert' button highlighted

  2. In the Target format drop-down list, choose H.264 MP4 video:

    The 'Convert file' screen

  3. Enter the New filename for the converted video.
  4. Select Convert/resize.
  5. You receive an email confirmation when the conversion is complete and the new file is ready on the Files tab:

    A converted MP4 file available on the 'Files' tab

Create a captions file

Captions are a text version of the speech and non-speech audio information needed to understand the content. They include what is said, identity who is speaking and include non-speech information conveyed through sound, such as meaningful sound effects.

For a video uploaded directly to SiteBuilder, you need to add a Web Video Text Tracks (WebVTT) file to provide the captions.

  1. A good starting point is an automatically generated captions file which you can then edit for accuracy, instead of attempting to transcribe a video from scratch. You can create one using Microsoft Stream:

    1. Go to Microsoft Stream, and sign in with your Warwick account.

    2. Follow Microsoft's guidance to generate automatic captions.

      Note: You do not need to publish the video for Stream to generate captions.

    3. Edit the transcript ake any necessary corrections or add descriptions of non-speech audio, as required.

    4. Download the captions file.

      Note: For more information, see the Academic Technology team's guide 'Use Microsoft Stream to create, stream and caption video'.

  2. Alternatively, create your own WebVTT file:

    1. Create a new file in a text editor (such as TextEdit on macOS, or Notepad on Windows) and save it with the file extension .vtt.

      Tip: If you already have captions in a .src file, you can convert this into a .vtt file using the converter at https://www.webvtt.org

    2. Add WebVTT to the top of your file. This tells web browsers that the file is in the WebVTT format.

    3. Leave a blank line, then add the start and end time for your first caption. These times are in the format [minutes]:[seconds].[milliseconds], with the start and end times separated by -->. For example:

      WEBVTT
      
      00:01.000 --> 00:04.000
    4. On the next line, enter the text for the first caption. When the video is played, the caption is displayed onscreen from the start time to the end time you specified. In the example below, the text "First caption example" would appear onscreen 1 second into the video, and disappear 4 seconds into the video:

      WEBVTT
      
      00:01.000 --> 00:04.000
      First caption example
    5. Leave another blank line, then add the start and end time of your next caption followed by the caption text, as above. Continue until you have finished captioning the video, then save your file.

      WEBVTT
      
      00:01.000 --> 00:04.000
      First caption example
      
      01:05.000 --> 00:10.000
      Second caption example
      
      23:15.000 --> 23:18.000
      Third caption example
    6. Upload your .vtt file to the same page as your video file via the Files tab in SiteBuilder. You link the captions file with the video when you add the video clip to the page.

Create a transcript

A basic transcript is a separate text version of speech and non-speech audio information required to understand the content. It includes what is said, who is speaking and non-speech information conveyed through sound, such as meaningful sound effects. A descriptive transcript also includes descriptions of the visual information contained in the video, further improving accessibility.

  1. Follow the steps to automatically generate and download a captions file using Microsoft Stream.
  2. Use the Microsoft Stream transcript VTT file cleaner to convert the captions file into the basis for a transcript.
  3. Edit the resulting text to correct errors, specify who is speaking, describe meaningful non-speech audio and optionally describe relevant visual information.
  4. Add the transcript text, or a link to it, beneath the video on the web page.

Create a preview image

Tip: A preview image displays in place of your video when the web page containing the video loads. It disappears when the video plays. To draw attention to your video and encourage visitors to select the play button, use an interesting and eye-catching image. Faces work particularly well. This image could be taken part way through the video rather than the default first frame.

Note: You can only upload a preview image for videos uploaded to Sitebuilder. If your video is on another platform, i.e. YouTube, you would need to set the preview image in YouTube itself.

  1. SiteBuilder can automatically generate a preview image for you:

    1. Browse to the page containing the video.

    2. Go to Edit > More, then select the Files tab.

    3. Select the video file to highlight it, then select Convert:

      The SiteBuilder 'Files' tab, with an MP4 file selected and the 'Convert' button highlighted

    4. In the Target format drop-down, select JPEG preview image:

      The 'Convert file' screen, ready to generate a JPEG image preview

    5. Select Convert/resize.

    6. When the image is ready, it appears on the Files tab, and you receive an email notification.

  2. Alternatively, to make your own preview image:

    1. Play your video on your computer at full-screen size.

    2. Pause the video at the point where it's displaying the image you want to use as the preview.

    3. Take a screenshot.

    4. Upload the screenshot to the Files tab in SiteBuilder.

Add a video clip to an old visual (classic) editor page

  1. Browse to the page where you want to add a video.
  2. Go to Edit > Edit centre content or Edit right content.
  3. Place your cursor in the page where you want to insert the video.
  4. In the toolbar, select Insert a > Video.
  5. Select the picker and browse to the file's location:

    Browse to the video file

  6. Alternatively, to embed a video from YouTube, paste the video's URL in the first box:

    Insert a video from YouTube

  7. We recommend you leave Type set to Detect automatically.
  8. Select an option from the Position drop-down list. The default position is left-aligned.
  9. Optionally, specify a Width or Height as a number of pixels or a percentage.

    Tip: To make the video span the full width of the page content, specify a Width of 100%.
  10. Optionally, enter the Preview image URL – the path to the preview image on the Files tab.
  11. If your video is uploaded to SiteBuilder, specify the Captions filename or URL of the captions file you uploaded.
  12. Select Insert. You should see your video URL (the file path) in a [media] tag, similar to the following:

    <!-- Video saved on Files tab -->
    [
    media captions="yourcaptions.vtt"]yourvideo.mp4[/media]
    <!-- Embed YouTube video -->
    [media]http://www.youtube.com/watch?v=1234[/media]
  13. When you have finished editing the page, select Publish.

[media] tag parameters in the old visual editor

Use any combination of the following parameters to control how the video displays:

  • width - a percentage or number of pixels. For example:

    <!-- span full width of container -->
    [media width=100%]yourvideo.mp4[/media]
    <!-- specify fixed width in pixels -->
    [media width=300]yourvideo.mp4[/media]
  • height - a number of pixels. For example:

    <!-- specify fixed height in pixels -->
    [media height=200]yourvideo.mp4[/media]
  • previewimage - an absolute or relative path to the preview image file. For example:

    <!-- absolute path to preview image -->
    [media previewimage=https://warwick.ac.uk/your-site/your-page/yourvideo-preview.jpg]yourvideo.mp4[/media]
    <!-- relative path to image saved to same page as video -->
    [media previewimage=./yourvideo-preview.jpg]yourvideo.mp4[/media]
  • align - can be left, middle, or right. For example:

    <!-- align middle -->
    [media align=middle]yourvideo.mp4[/media]
    <!-- align right -->
    [media align=right]yourvideo.mp4[/media]

    Tip: If you omit this parameter, the video will align to the left by default.

  • download - can be true or false. Use true to display a Download link beneath the video. For example:

    <!-- show download link -->
    [media download=true]yourvideo.mp4[/media]

    Tip: If you omit this parameter, the default value is false.

Related articles