Embedding and web termsUpdated
iframe
Also called: inline frame, <iframe>, iframe embed
Definition
An iframe (inline frame) is an HTML element, <iframe>, that displays a separate web page inside the current one. The embedded page loads from its own address and runs as its own document, kept apart from the host page's styles and scripts.
The attributes that matter
| Attribute | What it does |
|---|---|
| src | The address of the page to show inside the frame |
| title | A short label that screen reader users hear before entering the frame |
| width / height | The frame's size; the content inside doesn't change it |
| loading | eager (the default) or lazy, to wait until the frame is near the viewport |
| sandbox | Extra restrictions on the framed page; see iframe sandbox |
| allow | Which browser features, such as fullscreen or camera, the frame may use |
Why the separation matters
When the frame comes from another domain, your page can't read or style what's inside it, and the framed page can't reach into yours. That protects both sides, and it's why an embedded widget won't pick up your site's CSS. The two pages can only exchange messages that each side chooses to send.
MDN notes that every iframe is a complete document environment that needs its own memory and processing, so a page full of separate embeds costs more than one embed showing several items.
iframes in LinkedIn embeds
LinkedIn's “Embed this post” code is an iframe that loads the post from linkedin.com. LinkedInEmbed widgets also render in an iframe from LinkedInEmbed's own domain, whether you paste the iframe snippet or the script that creates the frame for you.
Common mistakes
- Leaving out the title, so assistive technology announces an unlabeled frame.
- Setting a height that fits on desktop, then finding the content cut off on a phone.
- Pasting the tag into a rich-text block, which shows the code instead of the frame.
- Expecting the frame to grow with its content; that takes an auto-resizing iframe.
Related terms
- Embed code
- Embed code is a snippet of HTML you paste into a web page to display content hosted somewhere else, such as a video, a social media post or a widget. It's usually an iframe tag, a script tag with a placeholder element, or a combination.
- iframe sandbox attribute
- The sandbox attribute on an <iframe> puts extra restrictions on the embedded page, such as blocking scripts, forms, pop-ups and navigation of the top window. An empty sandbox applies every restriction, and tokens like allow-scripts lift them one at a time.
- Auto-resizing iframe
- An auto-resizing iframe changes its height to match the content inside it, so there's no inner scrollbar or empty gap. Because a page can't measure a cross-origin frame's content, the frame reports its height with postMessage and a script on the host page applies it.
- Lazy loading
- Lazy loading means the browser waits to load an image or iframe until the visitor scrolls near it, instead of fetching everything as the page opens. In HTML you turn it on by adding loading="lazy" to <img> and <iframe> elements.
- Content Security Policy (CSP)
- A Content Security Policy (CSP) is a set of rules a website sends to the browser, usually in a Content-Security-Policy header, saying which sources the page may load scripts, frames, images and other resources from. Anything not allowed is blocked.
Related
Show your LinkedIn on your website
Paste a LinkedIn URL and embed it with one snippet. Free plan, no credit card.
Put your LinkedIn on your website today
Create your first widget in about two minutes. Free plan, no credit card required.