Embedding External Media in Canvas

Canvas supports embedded media using elements such as <iframe>, <audio>, and <video>. These patterns use standard HTML and are suitable for including maps, videos, audio clips, and other external resources within pages created in the Rich Content Editor.

The examples below show how to embed audio, a YouTube video, a Google Map, and a standard HTML5 video, followed by the code needed to reproduce each pattern.

Useful references

• MDN — <iframe> element
• MDN — <embed> element
• MDN — <audio> element
• MDN — <video> element
• W3C WAI — Making Audio and Video Media Accessible

Audio embed

Use the HTML5 <audio> element with one or more <source> children. The controls attribute displays built-in browser audio controls.

<audio controls>
  <source src="YOUR_AUDIO_FILE_URL" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

YouTube video embed

YouTube videos can be embedded using an <iframe> with the /embed/ URL format. The example below uses a public Canvas 101 video.

<iframe
  width="100%"
  height="400"
  src="https://www.youtube.com/embed/dwXwah-feFk"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Google Maps embed

Google Maps provides embed code that can be pasted directly into Canvas as an <iframe>. The example below shows an embedded map for Tate Modern.

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="100%"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

Video embed

Use the HTML5 <video> element to embed a video file directly. The controls attribute displays native playback controls and the poster attribute sets a placeholder image.

<video
  controls
  width="100%"
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
>
  Sorry, your browser does not support embedded videos.
</video>

Other services

Services such as Google Drive and Google Slides provide embed codes that can be used in Canvas via <iframe>, in the same way as the examples above. These can be pasted into the HTML editor when creating or editing a page.

Accessibility and limitations

• Always provide text alternatives for audio and video (for example, captions, transcripts, or brief summaries) so that learners who cannot hear or see the media can still access the content.
• Avoid relying on autoplay. Let learners control when media starts, and consider those using screen readers or working in shared spaces.
• Provide direct links to the original resource (for example, "Open in a new tab") beneath embeds in case the iframe or media player does not load.
• Some embeds may not work if your institution blocks certain domains or if the external site prevents embedding. Test in Student View and, if necessary, offer an alternative presentation of the same content.
• Keep iframes to a reasonable height and width so that they remain usable on smaller screens. Where possible, ensure that critical information appears in the main page content as well as inside the embedded frame.