A responsive iframe wrapper component with loading states, error handling, and site branding for seamless content embedding.
Some websites cannot be embedded in an iframe due to their security settings.
This is usually because of the X-Frame-Options or
Content-Security-Policy HTTP headers, which prevent the site from
being displayed inside an iframe on other domains. If you see a blank area or
an error, the site you are trying to embed likely has these protections
enabled.
Overview
The Embed component simplifies iframe integration by providing intelligent loading states, error handling, and professional site branding, making it perfect for showcasing external content, demos, and third-party tools. It enhances user trust with clear domain identification and fallback options when content fails to load. Essential for maintaining a polished user experience when embedding external websites or applications.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/embed.json
Usage
1import { Embed } from "@/registry/components/embed"23export function Component() {4 return (5 <Embed6 src="https://example.com"7 title="Example Website"8 height={600}9 allowFullScreen={true}10 />11 )12}
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL of the content to embed (required) |
title | string | "Embedded content" | Accessible title for the iframe |
height | number | string | 500 | Height of the embedded content |
width | number | string | "100%" | Width of the embedded content |
allowFullScreen | boolean | true | Allow fullscreen mode |
sandbox | string | "allow-scripts allow-same-origin allow-forms allow-popups" | Sandbox restrictions |
loading | "eager" | "lazy" | "lazy" | Loading behavior |
allow | string | "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" | Feature permissions |
className | string | "" | Additional CSS classes |
Examples
Blocked Content
Here is an example of a website which blocks the use of embedded content.
