Embed

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

Embed provides a responsive container for iframes with configurable aspect ratios. The iframe is absolutely positioned to fill the container.

Usage

Basic Usage

Open Editor

import { Embed } from "@paramanu/data-display-react"

export default function App() {
return <Embed ratio="16/9" src="https://example.com" title="Example" />
}

<div class="pm-embed pm-embed--16-9">
<iframe class="pm-embed__iframe" src="https://example.com" title="Example"></iframe>
</div>

Guidelines

Accessibility

• Always provide a title attribute on the iframe for screen readers.

API

Props

Prop	Type	Default	Description
ratio	"1/1" | "4/3" | "16/9" | "21/9"	"16/9"	Aspect ratio
fullWidth	boolean	false	Stretches to fill parent width