Audio, Video, and iframe

Introduction

HTML can embed sound, video, and external pages—not only images. Native <audio> and <video> elements cover many learning and marketing needs without plugins. <iframe> embeds maps, videos, and third-party widgets. This chapter shows how to use them safely and accessibly.

Prerequisites

• Images and responsive images
• Media files in your project or URLs you are allowed to embed
• Local preview over HTTP (Live Server), not only file://

Audio with <audio>

<audio controls src="audio/podcast-intro.mp3">
  Your browser does not support the audio element.
</audio>

Fallback text inside the element appears only if the browser cannot play audio.

Multiple formats with <source>

Browsers prefer different codecs. Offer alternatives:

<audio controls>
  <source src="audio/intro.ogg" type="audio/ogg">
  <source src="audio/intro.mp3" type="audio/mpeg">
  <p>
    Download the <a href="audio/intro.mp3">MP3 file</a> if playback fails.
  </p>
</audio>

The browser tries each <source> in order and uses the first supported type.

Video with <video>

<video controls width="640" height="360" poster="images/video-poster.jpg">
  <source src="video/demo.webm" type="video/webm">
  <source src="video/demo.mp4" type="video/mp4">
  <p>
    Your browser cannot play this video.
    <a href="video/demo.mp4">Download the MP4</a>.
  </p>
</video>

Captions with <track>

<video controls width="640" height="360">
  <source src="video/tutorial.mp4" type="video/mp4">
  <track
    kind="captions"
    src="video/tutorial-en.vtt"
    srclang="en"
    label="English"
    default
  >
</video>

kind values include subtitles, captions, descriptions, and chapters. Files are usually WebVTT (.vtt). Captions help deaf users, non-native speakers, and people watching without sound.

Autoplay Policies

Browsers restrict autoplay to protect users:

<!-- Often blocked unless muted -->
<video autoplay muted playsinline>
  <source src="video/loop.mp4" type="video/mp4">
</video>

Rules of thumb:

• Do not autoplay loud video on landing pages
• Prefer muted + playsinline for background loops
• Always provide controls unless there is a strong, accessible reason not to
• Let users pause decorative motion (accessibility and motion sensitivity)

Embedding with <iframe>

An iframe loads another HTML page inside your page:

<iframe
  src="https://www.openstreetmap.org/export/embed.html"
  title="Map of downtown Springfield"
  width="600"
  height="400"
  loading="lazy"
></iframe>

Common embeds:

• maps
• YouTube/Vimeo players (provider gives embed code)
• code sandboxes
• payment or booking widgets (careful with security)

title Is Required for Accessibility

Screen readers need a name for the iframe:

<iframe
  src="https://example.com/embed/chart"
  title="Quarterly revenue chart"
  width="100%"
  height="320"
></iframe>

Without title, users hear “frame” with no context.

sandbox for Untrusted Content

Limit what an embedded page can do:

<iframe
  src="https://untrusted.example/widget"
  title="Third-party widget"
  sandbox="allow-scripts allow-same-origin"
  width="400"
  height="200"
></iframe>

sandbox without allowances blocks scripts, forms, and popups by default. Add only the permissions you need.

iframe Performance and Layout

• Use loading="lazy" for below-the-fold embeds
• Set width and height (or CSS aspect-ratio) to avoid layout jump
• Too many iframes slow the page—each is a separate document
• Prefer native <video> when you host the file; use provider iframes when you need their player features

Provider Embed Example (Concept)

Video hosts often give HTML like:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Product demo video"
  width="560"
  height="315"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Paste provider code, then verify:

• title is meaningful
• dimensions fit your layout
• autoplay parameters match your policy

Mini Exercise

1. Add a short <audio controls> clip or a placeholder with download link.
2. Add a <video controls> with poster and one <source>.
3. Embed one iframe (map or official embed) with a descriptive title.
4. Open DevTools → Network and compare weight of video vs images on the page.

FAQ

Can I use MP4 everywhere?

MP4 (H.264) has broad support. WebM can be smaller for some content. Offering both improves coverage.

Why does video not play locally?

Some codecs and file:// restrictions cause issues. Test over http://localhost with Live Server.

Is iframe outdated?

No, but it is for embedding another document. Do not use iframe for your own page layout—that was a 1990s table-era pattern.

Are background videos in HTML?

Often implemented with <video autoplay muted loop playsinline> plus CSS positioning. Treat them as decorative; do not hide critical text only in the video.

What comes next?

Lists — unordered, ordered, and description lists for navigation, steps, and glossaries.