Media Embed

This component is used to display video and 360 imagery. It is best used on content pages amongst other content led components such as text blocks.

Key information

Embed media from multiple sources eg YouTube, Vimeo, 360s
With YouTube, ALWAYS take the video code from the browser address bar. Do NOT right click on the video and select Copy video URL - this will not play. Your code should look like https://www.youtube.com/watch?v=t-4hlLAoUcA and not like https://youtu.be/t-4hlLAoUcA
Image acts as a placeholder, which the media sits behind. The media opens in a modal when the image is clicked on
Image does not crop, height is flexible and respects the original image aspect ratio
To provide context to the user you can add title and intro text (NB the title must be set for the intro text to show)
NEVER mirror a media embed. Instead, create a duplicate media embed and then set the Master version using the +Add content link button
NB if you preview an image embed in a section you will see the view transcript page, you must preview an alternative piece of content to see the section

Accessibility

All videos must have a transcript added. Find out about adding a transcript. The transcripts will include all the dialogue and important sounds from the closed captions, and also any description of important visual information, including on-screen text.

If your video is a "talking head" video with no change in background/context, a transcript and closed captions will be enough. However, if not, you may need to provide an audio described version. An audio description provides a user who is blind or has a visual impairment with the equivalent content available to a user who can see, in a synchronised format (ie timed to the video).

Image guidance

The aspect of the image must be 16:9, recommended dimensions are 2000 x 1125px or in ThirdLight use 'Media embed thumbnail' and crop images as required using the 'Constrain proportions' checkbox.
Avoid using images with a white background
For YouTube only: if an image isn't added the default thumbnail from YouTube will be automatically pulled in. If you're using this you must complete the alt tag field. Note that if a thumbnail doesn't automatically pull through it will need to be configured within YouTube.
For Vimeo: we can't get a thumbnail from the API at this point in time, however you can use this tool to generate a thumbnail.
All images must be optimised using TinyJPG before uploading to T4.

Examples

Last updated: Wednesday 12 January 2022 13:33:19