Glossaryiframe

iframe

An iframe (inline frame) is an HTML element that loads one web page inside another, and it is the most common way to embed a hosted video player on a website. The video player runs in its own isolated frame, served by the video host. Attributes on the iframe control size, fullscreen permission and autoplay.

Why it matters

iframes are the simplest way to drop a third-party video player into a page, which saves engineering time. They also isolate the player's code from your site. The tradeoff is less control over styling, analytics and page speed, since each iframe loads a separate document.

How it works

  1. The page adds an iframe element whose source address points to a player page.
  2. The browser loads that page in a separate, sandboxed frame inside the host page.
  3. Attributes like allow and sandbox control what the frame can do, such as go fullscreen or autoplay.
  4. The host page talks to the player, if needed, through messages passed between frames.

iframe vs video tag: which should I use?

Use an iframe to embed a hosted player quickly, and the video tag when you control the player in your own code. iframes isolate third-party code and need little setup, but limit styling and tracking. The video tag gives full control and integrates with your analytics, but you handle streaming, captions and controls yourself or with a library.

Do iframes hurt SEO and page speed?

They can, if loaded eagerly. Each iframe loads a full separate page, which adds network requests and script work. Adding loading="lazy" defers the frame until it is near the screen. Search engines may not credit content inside the frame to your page, so add text and structured data on the host page.

Where it's used

Marketing teams, SaaS products and news publishers use iframes to embed hosted video players in web pages and help centers without building their own player.

By the numbers

  • Setting loading="lazy" on an iframe tells the browser to defer loading the frame until it nears the visible viewport, reducing initial page load time. (<iframe> element, MDN)