iFrames & Einbettungen

Jedes <iframe> in deiner Dokumentation erhält standardmäßig eine visuelle Gestaltung: abgerundete Ecken, einen umrandeten Rahmen und Abstände, die zum Rest deiner Seite passen. Du musst keine Wrapper-Divs oder Utility-Klassen hinzufügen, damit dies funktioniert.

Automatische Formatierung

Jamdesk wendet zur Renderzeit auf alle iFrames einen einheitlichen Rahmen an. Das erhält jedes iframe:

Die Rahmenfarbe stammt aus --color-bg-secondary, und die Rahmenlinie verwendet --color-border. Beide sind an dein Theme gebundene CSS-benutzerdefinierte Eigenschaften. Dadurch erhalten der helle und der dunkle Modus ohne zusätzlichen Aufwand die richtigen Farben.

Externe Inhalte einbetten

Eine einfache Einbettung verwendet ein standardmäßiges HTML-iframe-Tag:

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

Füge immer ein title-Attribut hinzu. Screenreader lesen es vor, und es hilft allen, die den Quellcode deiner Seite durchsuchen, zu verstehen, welche Inhalte die Einbettung enthält.

Responsive Größenanpassung

Die meisten Anbieter eingebetteter Inhalte liefern Inhalte mit einem festen Seitenverhältnis. Das Tailwind-Utility aspect-video hält das iframe unabhängig von der Viewport-Breite auf 16:9, während w-full es so streckt, dass es den übergeordneten Container ausfüllt:

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

w-full setzt width: 100% über Tailwind. Ohne diese Einstellung verwendet das iframe standardmäßig die integrierte Breite des Browsers (üblicherweise 300px), was auf breiten Bildschirmen fehlerhaft aussieht.

Verwende für Inhalte, die nicht dem Seitenverhältnis 16:9 entsprechen, etwa einen Figma-Prototyp oder ein Dashboard, die Syntax für beliebige Seitenverhältnisse von Tailwind:

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

Ersetze 4/3 durch das Seitenverhältnis, das zum Inhalt passt. Verwende aspect-[1/1] für quadratische Einbettungen, aspect-[21/9] für ultrabreite Einbettungen und so weiter.

Vimeo

Vimeo-Videos werden über ein standardmäßiges iframe eingebettet, das auf die Player-URL von Vimeo 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
/>

Ersetze VIDEO_ID durch die numerische ID aus einer beliebigen Vimeo-URL (die Zahl nach vimeo.com/). Das allow-Attribut gewährt dem eingebetteten Player Berechtigungen für den Vollbildmodus 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?