HowToCodePage

Media and embedding

Video, audio, iframes and SVG — including the attributes you need for autoplay, captions, and sandboxing third-party content.

Video and audio

<video controls width="640" poster="/img/preview.jpg">
  <source src="/media/clip.webm" type="video/webm">
  <source src="/media/clip.mp4" type="video/mp4">
  <track kind="captions" src="/media/clip.en.vtt" srclang="en" label="English" default>
  Your browser does not support embedded video.
</video>

<audio controls src="/media/podcast.mp3"></audio>
  • List source elements in preference order; the browser picks the first it can play.
  • track supplies captions/subtitles — required for accessibility in many jurisdictions.
  • poster shows a still before playback; omitting it often shows a black box.
  • Autoplay only works reliably when combined with muted; otherwise browsers block it.
⚠️
Autoplaying sound is one of the most disliked patterns on the web. If you must autoplay video, start muted and give users control.

Embedding other documents

<iframe src="https://example.com/widget" title="Live price widget" width="400" height="300" loading="lazy" sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer"></iframe>
AttributePurpose
titleNames the frame for screen readers — always include it
sandboxRestricts what the embedded page may do; start locked down and add tokens only as needed
loading="lazy"Defer off-screen frames
allowGrants specific features (camera, fullscreen, payment)
⚠️
Combining allow-scripts with allow-same-origin lets the framed page reach into its own origin and potentially remove its own sandbox attribute. Only do this for content you trust.

Inline SVG

SVG is markup, so it scales to any resolution and can be styled with CSS. Inline SVG costs no extra request; external SVG allows caching.

<svg viewBox="0 0 24 24" width="24" height="24" role="img" aria-label="Settings">
  <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/>
</svg>
  • currentColor lets the icon inherit text color automatically.
  • Decorative icons: aria-hidden="true" and no label; meaningful icons: role="img" plus aria-label.
  • Always include a viewBox so the drawing scales instead of clipping.

FAQ

My video will not autoplay.
Browsers block autoplay with sound. Use muted + autoplay + playsinline (the last is required on iOS Safari).
Why does my iframe show a blank box?
The embedded site likely sends X-Frame-Options or a restrictive Content-Security-Policy. Nothing you can do client-side — use their official embed code instead.

Links and images

Last refreshed 2026-09-17.