Embed Media

Introduction

A useful website does more than display text. It can include a tutorial video, a podcast clip, a map, or another piece of content from a trusted source. HTML provides elements for adding several kinds of media directly to a page.

In this lesson, you will add media to a simple travel guide page. You will learn when to use video, audio, and iframe, and how to provide helpful fallback text for visitors whose browsers cannot display the embedded content.

Key idea: Embedding content means placing an external or media file inside your page so visitors can use it without leaving the page.

Choosing the right HTML element

Video

Use the video element when you have a video file, such as an MP4, that you are allowed to use. The controls attribute gives visitors play, pause, volume, and other controls.

<video controls width="640">
  <source src="city-tour.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

The source element identifies the file and its format. The text inside the element is fallback content. A width can help control the displayed size, but responsive sizing is usually handled later with CSS.

Audio

Use the audio element for sound files such as MP3 recordings. Again, controls is important because visitors should decide when audio starts and stops.

<audio controls>
  <source src="welcome.mp3" type="audio/mpeg">
  Your browser does not support HTML audio.
</audio>

Avoid autoplaying audio. Unexpected sound can be distracting and can create accessibility problems.

External content with an iframe

Use an iframe when a trusted service provides an embed option, such as a map, video player, or interactive widget. An iframe displays another document inside your page.

<iframe
  src="https://example.com/map"
  title="Map showing the city center"
  width="600"
  height="400"
  loading="lazy">
</iframe>

Only embed content from sources you trust. The title describes the frame for screen-reader users. The loading="lazy" attribute can delay loading until the frame is near the visible part of the page.

Worked example: a local travel guide

Imagine a page about visiting a local park. The page includes a short tour video, an audio description, and a map supplied by a mapping service.

<h2>Explore Riverside Park</h2>
<p>Watch a short tour before your visit.</p>

<video controls width="640">
  <source src="riverside-tour.mp4" type="video/mp4">
  The tour video is unavailable. Please read the written park guide.
</video>

<p>Listen to an audio introduction.</p>
<audio controls>
  <source src="park-introduction.mp3" type="audio/mpeg">
  Your browser cannot play this audio. A written introduction is available below.
</audio>

<h3>Find the park</h3>
<iframe
  src="https://example.com/riverside-map"
  title="Map showing the location of Riverside Park"
  width="600"
  height="400"
  loading="lazy">
</iframe>

The example gives each media item a clear purpose. It also provides visible descriptions and fallback messages instead of assuming that every visitor can use the embedded content.

Guided activity: build a community event page

Create a page section for a community event. Work through these steps in your editor.

1. Add a video: Insert a video element with controls and a source for a file named event-highlights.mp4.
2. Add audio: Insert an audio element with controls and a source named organizer-message.mp3.
3. Add a map: Insert an iframe using an approved embed URL. Give it a useful title, a reasonable width and height, and loading="lazy".
4. Add context: Place a heading and a short paragraph before each media item explaining what visitors will find.
5. Test the page: Open it in a browser. Confirm that the controls appear, the text is understandable, and the map comes from a trusted source.

If you do not have media files or an approved map URL, use placeholder filenames and describe where the real files would go. Do not copy random embed code from an unknown website.

Common mistake

A common mistake is using autoplay or leaving out controls. Autoplay can surprise visitors, use data, and interfere with assistive technology. Without controls, visitors may not be able to pause or adjust the media. Another mistake is adding an iframe without a descriptive title. Always ask whether the media is necessary, trusted, and usable.

Independent challenge

Improve your event page by adding one more embedded item, such as a second video, an audio interview, or a calendar widget supplied by a trusted service.

• Choose the most appropriate HTML element.
• Write a short heading and description.
• Include controls for audio or video.
• Add fallback text for media files.
• If you use an iframe, add a specific title and lazy loading.
• Explain in one sentence why this media helps visitors.

Before you finish, check that every embedded item supports the page's purpose. Good embedding is not about adding as much media as possible; it is about making useful content easier to access.