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:

   

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

   

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

   

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:

   

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:

   

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:

   • Encode your video as H.264 MP4 and re-upload it to the Files tab. We recommend you use Handbrake to convert video formats when you need exact control over the conversion.

   • Select Convert video (recommended).

   • Select Do not convert. You can convert a file to H.264 MP4 in SiteBuilder later.

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:

   

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

   

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:

   

Create a captions file

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

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

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:

      

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

      

   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:

   

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

   

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

• Manage files
• Audio clips