Video

Videos are a rich source of content. They can be used to explain a complex idea in a more engaging way, or they can be used visually sell an exciting idea. Videos that include people can also bring a relatable human element to our content.

Video example

How to use videos

Videos can be added as a full width component in a panel. They can also be added to other panels and components such as:

A 50:50
Accordions
Tabs
Cards

Think carefully about where, how and why you use videos. Video content:

Is not typically well engaged with on our sites
Can quickly become out of date
Increases the load time and carbon footprint of a page
May not be accessible to users with low connectivity

It’s important that you make sure videos are accessible before you add them to a page. You’ll find out more in the accessibility section of this page.

Adding videos in the CMS

You can add a video to an existing panel or component by adding a ‘Video Component’. You can also use templates that already include a video element, such as ‘Card-video-x4' or ‘Video-50/50’.

To add a video to the component, you need to copy the video ID from the YouTube video. It will look something like 'bsYp9q3QNaQ'. You can add an image to use as the thumbnail for the video. If you don’t add an image, the CMS will use the thumbnail that’s already set via YouTube.

Videos should be left aligned as standard with a span of 8. We do this by adding the video to a container first and then applying the span to the container. This doesn't apply when adding a video to another component like an accordion, card or 50:50. The span should also be removed/set to default on pages that use left hand navigation.

On SDI, videos should be centre aligned with a span of 8. We do this by applying the span to the full panel.

Video modifier rules

Background: default (white) or ‘background’ (grey).
Grid span: 8
- Standard - applied at container level. Span removed on pages with left hand navigation
- SDI - applied at panel level
Padding: default, unless required to improve layout
Alignment: default

If you're adding a video to another component like a card or a 50:50, follow the modifier rules for those components.

Read our full guidance on using modifiers

Accessibility

All videos must have captions, either as open captions that are embedded in the video itself, or as closed captions that can be turned on and off. Don’t rely on auto-generated closed captions as these are often inaccurate. This doesn’t just benefit people with hearing loss – it also benefits people who can't play audio temporarily, such as on a busy train or quiet office.

You can also provide transcripts, audio description or BSL interpretations to make your videos even more accessible.

Find out more about making video and audio content accessible

Here's how a video should look as standard

This applies to most of our sites, including Scottish Enterprise and Find Business Support, but not SDI. It's aligned to the left side of the page, with a span of 8 so it doesn't take up too much of the page. We add the video (and any headings or text) into a container and apply the span to the container. This makes sure the content is aligned to the left.

If you're adding a video into a component like a card or accordion, follow the guidelines for that component.

Here's how a video should look on SDI

It aligned to the centre of the page, with a span of 8 so it doesn't take up too much space on the page. We apply the span to the whole panel to make sure it's centred.