HTML Tutorial / Embed Audio, Video, and External Content

HTML can play media files with audio and video, or display another document inside a page with iframe. Successful embedding depends on real file paths and supported formats. Useful controls, captions or transcripts, and the trustworthiness of external content matter too.

Play audio and video files

The example assumes sample.mp3, sample.mp4, and sample-poster.webp are next to the HTML file. To run it, supply files you have the right to use and adjust the names as needed.

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

<video controls width="640" height="360" poster="sample-poster.webp">
  <source src="sample.mp4" type="video/mp4">
  <track src="sample-en.vtt" kind="captions" srclang="en"
         label="English captions" default>
  Your browser does not support video playback.
</video>

controls provides the browser's playback controls, and poster is shown before a video plays. For speech or meaningful sounds, provide accurate captions. The referenced sample-en.vtt is not automatically created. Without that file, the captions cannot appear.

A WebVTT caption file is UTF-8 text. This minimal example shows one cue for the first three seconds; real captions must cover the video's speech and important sounds at the correct times.

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to Small Garden.

When important information is conveyed by audio, also provide a text transcript. Let users start playback themselves rather than unexpectedly autoplaying sound. If you offer multiple source formats, the underlying files must actually use those formats; renaming an extension does not convert media.

Embed external content with iframe

An iframe displays another document within the current page. The URL below is a structural placeholder, not a working media embed. Replace it with an official embed URL supplied by the provider.

<iframe
  src="https://example.com/embed/example"
  title="Introduction to the example content"
  width="640" height="360"
  loading="lazy"></iframe>

The title describes the frame's purpose. A provider may forbid embedding even if its ordinary page URL works. External content can affect privacy, cookies, and performance, so use a trusted provider's official embed code only when it adds value. State the embedded item's title or context in nearby text so the surrounding article still makes sense when it does not load.

If media will not play or fit

• Verify that the file exists at the specified path and the server sends the appropriate media type.
• Check whether the browser supports the file's actual encoding, not only its filename extension.
• Use CSS to limit the width on small screens without distorting the video's aspect ratio.
• For external content, check the provider's embedding policy and terms.

See the MDN video reference and iframe reference for element-specific attributes.