iFrames & Embeds

Jedes <iframe> in Ihrer Dokumentation erhält abgerundete Ecken, einen Rahmen und einen Abstand, der zum Rest Ihrer Seite passt. Sie benötigen dafür keine Wrapper-Divs oder Utility-Klassen.

Automatische Formatierung

Jamdesk wendet diesen Rahmen beim Rendern auf jedes iframe an:

Die Rahmenfarbe stammt von --color-bg-secondary. Die Randlinie verwendet --color-border. Diese CSS-Custom-Properties folgen Ihrem Theme, einschließlich des Dark Mode.

Externe Inhalte einbetten

Eine einfache Einbettung verwendet ein Standard-HTML-iframe-Tag:

<iframe
  src="https://example.com/embed"
  width="100%"
  height="400"
  title="Description of embedded content"
/>

Fügen Sie immer ein title-Attribut hinzu. Screenreader kündigen es an. Außerdem erfährt jeder, der Ihren Seitenquelltext liest, was die Einbettung enthält.

Responsive Größenanpassung

Die meisten Einbettungsanbieter liefern Inhalte mit einem festen Seitenverhältnis. Das Tailwind-Utility aspect-video hält das iframe unabhängig von der Viewport-Breite bei 16:9. w-full dehnt es auf die gesamte Breite des übergeordneten Containers:

<iframe
  className="w-full aspect-video"
  src="https://example.com/embed"
  title="16:9 responsive embed"
/>

w-full setzt über Tailwind width: 100%. Ohne diese Klasse verwendet das iframe die integrierte Breite des Browsers (meist 300px). Das wirkt auf breiten Bildschirmen fehlerhaft.

Verwenden Sie die Syntax für beliebige Seitenverhältnisse von Tailwind für Inhalte, die nicht 16:9 sind, etwa einen Figma-Prototyp oder ein Dashboard:

<iframe
  className="w-full aspect-[4/3]"
  src="https://example.com/embed"
  title="4:3 responsive embed"
/>

Ersetzen Sie 4/3 durch das Verhältnis, das zum Inhalt passt. aspect-[1/1] für quadratische Einbettungen, aspect-[21/9] für Ultrawide und so weiter.

Vimeo

Betten Sie ein Vimeo-Video mit einem Standard-iframe ein, das auf seine Player-URL verweist:

<iframe
  className="w-full aspect-video rounded-xl"
  src="https://player.vimeo.com/video/VIDEO_ID"
  title="Vimeo video player"
  allow="autoplay; fullscreen; picture-in-picture"
  allowFullScreen
/>

Ersetzen Sie VIDEO_ID durch die numerische ID aus einer beliebigen Vimeo-URL (die Zahl nach vimeo.com/). Das allow-Attribut gewährt dem eingebetteten Player die Berechtigungen für Vollbild und Bild-in-Bild.

Häufige Einbettungen

<iframe
  height="400"
  style={{width: '100%'}}
  src="https://codepen.io/USERNAME/embed/PEN_ID?default-tab=result"
  title="CodePen Embed"
  allowFullScreen
/>

<iframe
  src="https://codesandbox.io/embed/SANDBOX_ID?fontsize=14&theme=dark"
  style={{width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden'}}
  title="CodeSandbox"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>

<iframe
  style={{border: '1px solid rgba(0, 0, 0, 0.1)'}}
  width="100%"
  height="450"
  src="https://www.figma.com/embed?embed_host=share&url=FIGMA_URL"
  allowFullScreen
/>

<iframe
  src="https://www.loom.com/embed/VIDEO_ID"
  width="100%"
  height="400"
  allowFullScreen
/>

Wie geht es weiter?