Media Elements & Iframes

Embedded content — images, video, audio, iframes — accounts for the majority of page weight on the modern web. How you load, size, and secure these elements directly impacts Core Web Vitals, accessibility, and security posture.

Images: Beyond <img>

Responsive Images with srcset and sizes

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg   400w,
    hero-800.jpg   800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Mountain landscape at sunset"
  loading="lazy"
  decoding="async"
  fetchpriority="high"
/>

• srcset with w descriptors tells the browser what's available
• sizes tells the browser how much viewport space the image will occupy
• The browser picks the optimal source based on viewport, DPR, and network

The <picture> Element

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" />
</picture>

<picture> enables art direction and format selection. The browser uses the first matching <source>.

Image Performance Attributes

<img
  src="product.jpg"
  alt="Red sneakers"
  width="600"
  height="400"
  loading="lazy"
  decoding="async"
/>

Setting explicit width and height lets the browser reserve space before the image loads, preventing Cumulative Layout Shift.

Video

Native Video Element

<video
  controls
  preload="metadata"
  poster="thumbnail.jpg"
  width="720"
  height="405"
>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English" />
  <track kind="captions" src="caps-en.vtt" srclang="en" label="English (CC)" />
  <p>Your browser doesn't support HTML5 video.</p>
</video>

Preload Strategies

For above-the-fold hero videos, preload="metadata" plus a poster gives instant visual feedback without downloading the full file.

Video Performance Patterns

<video autoplay muted loop playsinline preload="none">
  <source src="background.webm" type="video/webm" />
  <source src="background.mp4" type="video/mp4" />
</video>

• muted is required for autoplay (browser policy)
• playsinline prevents iOS from going fullscreen
• preload="none" with intersection observer — load when scrolled into view

Audio

<audio controls preload="metadata">
  <source src="podcast.opus" type="audio/opus" />
  <source src="podcast.mp3" type="audio/mpeg" />
  Your browser doesn't support the audio element.
</audio>

The Web Audio API provides programmatic control for advanced use cases (visualizations, spatial audio, effects).

Iframes: Embedding and Security

Basic Usage

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560"
  height="315"
  title="Video player"
  loading="lazy"
  allow="accelerometer; autoplay; encrypted-media; gyroscope"
  allowfullscreen
></iframe>

The sandbox Attribute

sandbox restricts what embedded content can do:

<iframe
  src="https://untrusted-widget.example.com"
  sandbox="allow-scripts allow-same-origin"
  title="Widget"
></iframe>

Warning: allow-scripts + allow-same-origin together essentially remove sandboxing — the iframe can remove its own sandbox attribute.

Permissions Policy (allow attribute)

<iframe
  src="https://maps.example.com"
  allow="geolocation; camera 'none'; microphone 'none'"
></iframe>

Controls which browser features the iframe can access, independent of sandboxing.

Cross-Origin Communication

// Parent → iframe
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage({ type: 'UPDATE', data }, 'https://trusted.com');
 
// Iframe → parent
window.parent.postMessage({ type: 'RESIZE', height: document.body.scrollHeight }, '*');
 
// Listening (with origin validation)
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://trusted.com') return;
  handleMessage(event.data);
});

Always validate event.origin — never trust * in production.

Iframe Performance Impact

Iframes are expensive:

• Each iframe creates a new browsing context (separate document, styles, scripts)
• They block the parent's load event
• Nested iframes multiply the cost

Mitigations:

• loading="lazy" for below-fold iframes
• Facade pattern: show a static thumbnail, load the iframe on click
• srcdoc for lightweight inline content: <iframe srcdoc="<p>Hello</p>" />

The <object> and <embed> Elements

Legacy embedding elements — avoid in modern code. They exist primarily for PDFs and Flash (deprecated). Use <iframe> for document embedding and native elements for media.

Interview Signal

Senior candidates demonstrate:

1. Responsive images — srcset/sizes mechanics, format negotiation with <picture>, DPR awareness
2. Performance attributes — loading, decoding, fetchpriority, explicit dimensions for CLS
3. Iframe security — sandbox restrictions, permission policies, postMessage origin validation
4. Video optimization — Preload strategies, muted/playsinline for autoplay, intersection observer loading
5. Accessibility — alt text quality, <track> for captions, title on iframes