Multimedia

The <video> element lets you embed video content directly in your page. Before HTML5, embedding video required third-party plugins like Flash. Today, the browser handles it natively.

Key attributes

• src — URL of the video file. Alternatively, use nested <source> elements to offer multiple formats.
• controls — Displays the browser's built-in play/pause, volume, and progress controls. Without this, the video appears but users have no way to interact with it.
• autoplay — Starts playing automatically. Most browsers block autoplay unless the video is also muted.
• loop — Replays the video continuously.
• muted — Starts the video with sound off.
• poster — URL of an image displayed before the video plays (like a thumbnail).
• width / height — Sets the dimensions of the video player.
• preload — Hints how much data to pre-fetch: none, metadata, or auto.

The text between the opening and closing <video> tags is fallback content shown in browsers that do not support the element.

The <audio> element works very similarly to <video>. It accepts the same controls, autoplay, loop, muted, and preload attributes.

Why use <source> instead of src?

Different browsers support different media formats. By providing multiple <source> elements, the browser picks the first format it can play:

<audio controls>
  <source src="track.ogg" type="audio/ogg">
  <source src="track.mp3" type="audio/mpeg">
  Fallback text for unsupported browsers.
</audio>

The type attribute helps the browser decide quickly without downloading the file first. Common types:

• Video: video/mp4, video/webm, video/ogg
• Audio: audio/mpeg (MP3), audio/ogg, audio/wav

The <track> element

The <track> element adds timed text tracks to <video> (or <audio>). The most common use is subtitles and captions in WebVTT format (.vtt files).

• kind — subtitles, captions, descriptions, chapters, or metadata.
• srclang — Language code (e.g., en, fr).
• label — Human-readable label shown in the track picker.
• default — Enables this track by default.

The <iframe> (inline frame) element embeds another HTML document inside the current page. It is commonly used to embed:

• YouTube or Vimeo videos
• Google Maps
• CodePen demos
• Third-party widgets

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  title="YouTube video player"
  allowfullscreen
></iframe>

Security considerations

• sandbox — Restricts what the embedded page can do (run scripts, submit forms, navigate the parent, etc.). Start restrictive and add permissions as needed.
• allow — Feature policy for the iframe (camera, microphone, geolocation, etc.).
• loading="lazy" — Defers loading until the iframe is near the viewport, improving performance.

Always include a title attribute on iframes for accessibility — screen readers use it to describe the embedded content.