Adding videos and audio to your Mosaic site

We recommend hosting audio externally on third-party streaming services, such as the University's Podcasts service, and then embedding it in your Mosaic site using the WYSIWYG widget. 

As of November 2026, it is no longer possible to render embedded YouTube or Vimeo videos on a page. YouTube and Vimeo videos were no longer correctly interacting with the Civic UK cookie control, and cookies were being set regardless of a user’s consent. A change has been made so that an embedded video will be automatically replaced with a static image and link to the video.

As an alternative, we recommend adding a link in text to a YouTube or Vimeo video.

Why host externally?

Audio files take up significant amounts of disk space, and as such will count towards the storage space which determines your Mosaic pricing band.

Hosting your audio on a dedicated media-hosting service also allows you to incorporate the social aspects (commenting, favouriting, playlists, sharing) without these having to be replicated on Mosaic, and gives you an extra channel for engagement.

Banner background videos

Inline player for externally hosted audio

To add a simple inline audio player like the above for an externally hosted audio file, you can go into the 'Source' view for a WYSIWYG and add an <audio> tag pointing to the location of the audio file, i.e.

<audio controls="">
    <source src="https://mosaic.web.ox.ac.uk/file_address" type="audio/mpeg" /> 
    Your browser does not support the audio element.
</audio>

The 'file_address' must be replaced with the full address of the .mp3 file. It can be tricky to find this; you may need to look at the source of the page which links to it.

On podcasts.ox.ac.uk one way to find the address of the audio file is to click on the 'Audio RSS Feed' link, and look for the contents of the "url" attribute on the <enclosure> tag in the resulting XML page, e.g. 

<enclosure url="http://media.podcasts.ox.ac.uk/path/to/podcast/file.mp3" length="36523882" type="audio/mpeg" />

Notes:

• if the audio file is not an mp3 you will need to change the value of the 'type' attribute accordingly. Supported formats are audio/mpeg, audio/ogg and audio/wav.
• the message 'Your browser does not support the audio element' is a fallback which will only display in the unlikely event that the viewer's browser does not support this element. All modern web browsers support the <audio> element.