Please read our student and staff community guidance on COVID-19
Skip to main content Skip to navigation

Video clips

You can embed videos in a SiteBuilder page – the video itself can be stored in SiteBuilder or YouTube. We recommend the H.264 MP4 file format for video, as it's compatible with the majority of web browsers and devices.

In this article:

Upload a video to the Files tab

  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 (yourvideo.flv) uses a proprietary video format that cannot be played back on devices that do not support Flash plugins.

    If possible, please re-encode this file as an H.264 MP4 video to maximise the compatibility.”

    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 the 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 Convert:

    Convert button on Files tab

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

    Convert file options

  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:

    Converted MP4 file available on the Files tab

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.

  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. For the Target format, choose 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 you want to capture the image.
    3. Take a screenshot.
    4. Upload the screenshot to the Files tab in SiteBuilder.

Create a captions file

Due to accessibility regulations, videos you add to the Warwick website must have captions.

An easy way to achieve this is to use YouTube, which automatically generates captions. It also provides an interface to enter text for the video yourself. You can then embed the YouTube video in a SiteBuilder page.

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

  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 to 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 time and end time for your first caption. These times are in the format [minutes]:[seconds].[milliseconds], with the two times separated by --> .

    WEBVTT

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

    WEBVTT

    00:01.000 --> 00:04.000
    Example text for the first caption
  5. Leave another blank line, then add the start time and end time for your next caption. On the line below these times, add the text for your next caption. Continue until you have finished captioning the video, then save your file.

    WEBVTT

    00:01.000 --> 00:04.000
    Example text for the first caption

    01:05.000 --> 01:07.000
    Example text for the second caption

    23:15.000 --> 23:18.000
    Example text for the third caption
  6. Upload your .vtt file in the same place as your video file, via the Files tab in SiteBuilder.

Add a video clip to a web 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

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


width – a percentage or number of pixels. Examples:

<!-- Span full width of container -->
          [media width=100%]myvideo.mp4[/media]
<!-- Specify fixed width in pixels -->
[media width=300]myvideo.mp4[/media]

height – a number of pixels. Example:

<!-- Specify fixed height in pixels -->
[
media height=200]myvideo.mp4[/media]

previewimage – an absolute or relative path to the preview image file. Examples:

<!-- Relative path to image saved in same location as video -->
[
media previewimage=myvideo-preview.jpg]myvideo.mp4[/media]
<!-- Absolute path to image -->
[
media previewimage=https://warwick.ac.uk/fac/arts/music/myvideo-preview.jpg]myvideo.mp4[/media]

align – can be left, middle or right. If you omit the parameter, the default value is left. Examples:

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

download – can be true or false. Use true to show a download link beneath the video. If you omit the parameter, the default value is false. Example:

<!-- Show download link -->
[
media download=true]myvideo.mp4[/media]

Related articles

Support

Email webteam at warwick dot ac dot uk
How to report a problem