Video

Boost engagement and build trust

Demo - Option 1: Full-width video

Video heading (up to eight words)

Add a brief description of your video so users quickly understand what to expect (and why it's worth their time).

Option 2: Video in the centre

Video heading (up to seven words)

Along with a short description of your video, you can use a body text field to add supporting content below.

This copy should support the narrative of the video.  

Use the Rich Text Editor to format your copy to aid readability. This includes features such as bulleted lists, bold and italic, and headings (e.g. H3, H4). 

Use paragraphs (of no more than four sentences) to avoid walls of text. 

The CMS responds best to clean text, free from residual code. So before pasting and saving your text, remove any formatting (for example, by using the icon or pasting direct from Notepad).

Option 3: Video on the right

Video heading here

You can add a short description of your video here (aim for no more than 20 words).

Supporting heading here 

This layout lets you incorporate a video into an existing narrative.

Try to balance this text length with the thumbnail image. Your text shouldn’t be much shorter or longer than the corresponding image, so aim for:

  • Landscape image –  approximately 100 words
  • Portrait image –  approximately 120 words

Users will want to know what the video is about (and why they should view it) before they hit play. 

This means getting your descriptions, titles and supporting content right is as important as the video itself.  

Overview

Boost engagement and build trust

Embedding a video on a page can enhance your storytelling. More visually stimulating than text and images, it's a way to:

  • Draw the eye to key messages 
  • Provide additional context 
  • Summarise long-form content 

You have three different video display options to choose from, each with varying positioning and specifications:

  1. Full-width video
  2. Video in the centre  
  3. Video on the right

This gives you the option to either stop the narrative to focus on the video, or introduce a video as part of the narrative.

How to use it

The inline video options use two columns: the multimedia column and the text column.  

In the multimedia column, you need to add a: 

  • Video  
  • Thumbnail image  
  • Video description 

In the text column, you can add a: 

  • Heading  
  • Text box

Step 1: Upload your video to a hosting platform 

Large video files can negatively impact page speed, a key Google ranking factor. Instead of uploading the video directly to the page, embed the video link.  

Embedding involves uploading your video file to video hosting platform, such as YouTube or Vimeo, and pasting the link into the component in the CMS.

Once you’ve uploaded the video, copy the URL – you’ll need this for the next step.  

Step 2: Add the video to your page 

In the CMS, add the video component. Choose ‘select video’ then ‘link a video’. Paste your video URL into the ‘video URL’ text field.  

Use the ‘name’ text field to give your video a suitable title. This text will appear when users hover over the video. Screen reader users rely on this text to understand the video content. So give it a descriptive, engaging title, such as: 

  • How to avoid potential pitfalls of PII renewal in 2026 

Finally, select ‘save link’.  

Step 3: Choose a video position

Use the ‘video layout’ dropdown menu to choose where you want your video to appear on the screen.  

The video can be positioned in three different ways: 

  • Full-width video – doesn’t support the text box 
  • On the right – text box runs parallel on the left 
  • In the centre – text box appears below the video 

The recommended amount of text differs depending on the layout you choose – see steps 5 and 6 for more information.  

Step 4: Add a thumbnail image  

The thumbnail image is displayed by default. This image should encourage users to click on the video.  

Name the image in an accessible way. Screen reader users rely on text to access visual elements such as images and video. 

Technical image requirements 

Image files can affect page speed, a key Google ranking factor. Smaller images mean faster loading times, so make image files as small as possible.

Squoosh is a free image optimiser that lets you reduce file size while maintaining a high quality. You can use it to both resize and compress your image.  

For best results, follow the recommended image requirements: 

FormatOrientationDimensionsFile size
JPGSquare1,600px by 1,600px<100kb

Step 5: Add a video description  

The video description is a snippet of teaser text, designed to encourage users to click on the video.  

Your description should be a short phrase or sentence. Use a maximum of 20 words or up to three lines.  

Step 6: Write a heading

The heading appears under the video. You can use it for all video positions, but it works best as part of the full-width video option.  

The maximum word count depends on the video position: 

  • In the centre: Use up to seven words, and don’t run onto a second line (maximum 41 characters) 
  • On the right: Use up to five words, and don’t occupy two full lines (maximum 31 characters) 
  • Full width: Use up to eight words, and don’t run onto a second line (maximum 30 characters) 

Step 7: Add your text 

When using the video-on-the-right layout, try to balance the text length with the thumbnail image. Use these recommendations as a guide: 

  • Landscape image – 11 lines, approximately 100 words 
  • Portrait image – 15 lines, approximately 120 words  

Do's and don'ts

Don't

  • Don’t use portrait-format images

    Portrait images can appear cropped, distorted, or leave empty spaces on wide screens.