Andromeda
Note

HTML Embedded Media

Definition

HTML elements that import external resources into a document: <iframe> for nested browsing contexts, <object>/embed for plug-in content, and native <video>/<audio> for multimedia playback.

Why It Matters

These elements (like <video> and <audio>) standardized how we consume multimedia on the web, ending the “plugin wars” and making the internet more accessible. They are the technical infrastructure for the modern attention economy and global digital culture.

Core Concepts

<!-- Video with fallback sources -->
<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<!-- Iframe for a map -->
<iframe src="https://maps.google.com/..." width="600" height="450"></iframe>
  • <iframe>: Embeds another HTML document (YouTube, maps, ads); supports sandbox for security.
  • <object>: Generic embedder with data URL and type MIME; supports fallback content.
  • <video> / <audio>: Native HTML5 media with controls, poster, autoplay, loop, muted, preload.
  • Multiple Sources: <source> elements with different formats for cross-browser support.
  • <track>: WebVTT subtitles, captions, and descriptions.
  • <canvas>: Scriptable 2D raster drawing surface controlled by JavaScript.

Connected Concepts

Connected notes