Digital Design

External Media

External Media

This content type can be used to embed external media, eg a video or map, into your web page.

All the media examples on this page can be added using the Content Blocks content type '06. External Media'.

Video

Your videos should be hosted on a dedicated delivery service, eg YouTube. 

Make sure that only suggested videos from your channel appear at the end of your video. Take the web address from the video's embed code then add ?rel=0 to the end of the address.

Videos align to the right on desktop. On mobile they behave the same as images - stretching to fill the width of the screen and flowing below content.

You can add a caption to a video but you don't need to duplicate the video title in the caption if it is already displayed in the media player. The length of the caption is limited to 50 characters.

We recommend that you only add one video per page. Any more than this slows the page load.

Digital publications

Digital publications hosted on Issuu can be embedded in your site using the web address straight from the browser address bar.

They can be full width or align to the right on desktop. They open in a media viewer when a user clicks to read.

On mobile the publication converts to HTML and opens in a new browser window.

You should always include a link to the publication as a downloadable PDF, eg Download Vision 2021 (PDF: 2.25 MB).

We recommend that you only add one publication per page. Any more than this slows the page load.

[MEDIA]

Audio

Your audio files should be hosted on a dedicated delivery service, eg SoundCloud. 

Click the share button on SoundCloud to get the link for the track you want to embed.

Audio should align right on desktop and will stretch to full width on mobile.

[MEDIA]

Google Maps

Standard Google Maps can be embedded in your site using an embed url. Follow this process:

  1. Search Google Maps for the location you want to map using the building name and postcode, ie Daysh Building, NE1 7RU.
  2. Click on Share. This will open a pop-up box with two options.
  3. Click on Embed Map.
  4. Copy the code starting <iframe src= from the box.
  5. Delete everything from that code except the url. This is important as the other instructions set width and height, which are not required for a responsive website.
  6. Place the url into the external media content type, update and approve. 

Maps can be full width or right aligned on desktop. On mobile they will stretch to full width and flow below the content.

Custom maps that use Google's My Maps functionality can also be directly embedded using the external media content type, again by using the embed url.

Web editors who have previously used a browser url for embedding maps are encouraged to replace it with the embed url using the process outlined above.