Lazy loading for video and audio elements

at a glance

syntax

Content-attribute grammar — a standard lazy loading attribute, defined once in the HTML living standard and now used by <img>, <iframe>, <video>, and <audio> (quoted verbatim, fetched 2026-09-20): “A lazy loading attribute is an enumerated attribute with the following keywords and states: lazy — Lazy — used to defer fetching a resource until some conditions are met; eager — Eager — used to fetch a resource immediately; the default state.” A missing or unrecognized value therefore behaves as eager.

<video loading="lazy"> … </video>
<audio loading="eager"> … </audio>   <!-- eager is the default state -->

DOM reflection (HTML living standard — media elements): HTMLMediaElement gains attribute DOMString loading, and “the loading IDL attribute must reflect the loading content attribute, limited to only known values” — so reading video.loading yields "eager" or "lazy", and assigning it sets the content attribute:

const video = document.querySelector("video");
video.loading = "lazy";          // same as setting the attribute in markup
console.log(video.loading);      // "lazy"

why it exists

Since Chrome 76, <img loading="lazy"> and <iframe loading="lazy"> have let browsers skip fetching off-screen resources until the user scrolls close to them. The same pattern has never applied to <video> and <audio>, which start loading their source files as soon as the parser encounters them regardless of position on the page. Long-form pages with multiple embedded videos pay a large up-front network cost even when most users never scroll to those media elements. The loading attribute on media elements closes this gap and aligns behaviour across all embeddable resources.

the attribute

When loading="lazy" is set:

example

Basic lazy video

<video loading="lazy" controls>
  <source src="feature-demo.mp4" type="video/mp4">
  <source src="feature-demo.webm" type="video/webm">
</video>

Lazy audio

<audio loading="lazy" controls>
  <source src="podcast-episode.mp3" type="audio/mpeg">
  <source src="podcast-episode.ogg" type="audio/ogg">
</audio>

Combining with preload

<!-- Best practice for a long page with many videos:
     lazy defers fetching; preload="metadata" limits initial load to just
     duration/dimensions once the element enters the threshold zone. -->
<video loading="lazy" preload="metadata" controls>
  <source src="explainer.mp4" type="video/mp4">
</video>

Detecting support

const supportsLazyMedia = 'loading' in HTMLVideoElement.prototype;
if (!supportsLazyMedia) {
  // Fall back to IntersectionObserver-based lazy loading
}

browser compatibility

Per-version data from BCD html/elements/video.json and audio.json (identical rows for both elements, and for the HTMLMediaElement.loading reflection), verified 2026-09-20:

Baseline: limited availability per the loading-lazy-media web-feature on webstatus.dev (queried 2026-09-20) — Chromium-only so far.

security and privacy

The attribute adds no new capability: deferred requests are the same media fetches the element would make anyway, under the same CORS and content-security rules. The one observable property is inherent to all lazy loading attributes: because the fetch fires when the element nears the viewport, its timing reveals approximate scroll position to the server hosting the media — exactly as <img loading="lazy"> has since Chrome 76. Pages that consider scroll behavior sensitive should not gate third-party-hosted media on it. Nothing else changes: no new headers, no new origins, no persistent state.

see also

• chromestatus — Lazy loading for video and audio elements (5200068565139456) (API record)
• WHATWG HTML PR #11980 — the spec change (merged 2026-03-23), now in the HTML living standard
• MDN — <video> (now documents the loading attribute, verified 2026-09-20)
• Scott Jehl: Lazy loading media elements — background reading by the spec PR’s author
• Chromium bug — issue 469111735
• chrome-platform-showcase: Lazy loading for video and audio demos (five concept demos, route 200)