IFrame

Responsive iFrame-Einbettung mit aspect-ratio-Container und verpflichtendem title-Attribut für Barrierefreiheit (WCAG 2.1, SC 4.1.2). Unterstützt lazy loading, sandbox und benutzerdefinierte Seitenverhältnisse.

Video-Embed (16/9)

Standard-Seitenverhältnis 16:9 – ideal für YouTube, Vimeo oder andere Videoplattformen. Das iframe laedt per default lazy.

YouTube Video im 16:9-Format

<IFrame
  src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"
  title="YouTube Video: Beispielvideo"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
/>

Karten-Embed (4/3)

OpenStreetMap-Einbettung im 4:3-Format – gut geeignet für Standortkarten, Anfahrtsbeschreibungen oder interaktive Kartenansichten.

OpenStreetMap im 4:3-Format

<IFrame
  src="https://www.openstreetmap.org/export/embed.html?bbox=13.3,52.5,13.4,52.55&layer=mapnik"
  title="OpenStreetMap: Berlin Mitte"
  aspectRatio="4/3"
/>

Sandbox-Modus

Mit dem sandbox-Attribut können die Berechtigungen des eingebetteten Inhalts eingeschränkt werden. Hier ein Beispiel mit Sandbox und begrenzter Breite.

Sandboxed iframe mit maxWidth

<IFrame
  src="https://example.com"
  title="Beispielseite im Sandbox-Modus"
  sandbox="allow-scripts allow-same-origin"
  maxWidth="640px"
  aspectRatio="16/9"
/>

Installation

cp-components add iframe