Lorem ipsum dolor
Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
Lorem ipsum dolor sit
Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
Consetetur sadipscing elitr
Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
Sed diam nonumy eirmod
Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam.
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
Ut labore et dolore
Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
Stet clita kasd
Gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
At vero eos
Et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
VideoGallery
Mehrere Videos im Grid
Die VideoGallery-Komponente zeigt mehrere Videos in einem responsiven Grid an. Sie unterstützt 1-3 Spalten und ist ideal für Video-Sammlungen.
Codebeispiel
<VideoGallerytitle="Lorem ipsum dolor"subtitle="Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."columns={3}videos={[ { url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ", title: "Lorem ipsum dolor sit", subtitle: "Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat." }, { url: "https://www.youtube.com/watch?v=abc123", title: "Consetetur sadipscing elitr", subtitle: "Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." }, { url: "https://www.youtube.com/watch?v=xyz789", title: "Sed diam nonumy eirmod", subtitle: "Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam." }]}classes={{ container: "max-w-7xl mx-auto", grid: "gap-6"}}/>Parameter
| Bezeichner | Typ | Beschreibung | Default |
|---|---|---|---|
| title | string | Hauptüberschrift | - |
| subtitle | string | Unterüberschrift | - |
| videos | VideoItem[] | Array von Video-Objekten mit url, title, subtitle | [] |
| columns | 1 | 2 | 3 | Anzahl der Spalten im Grid | 2 |
| classes | object | CSS-Klassen-Overrides | {} |
Lorem ipsum
Dolor sit amet, consetetur sadipscing elitr
Video wird nach Cookie-Zustimmung geladen
Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.
Lorem ipsum dolor
Sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
VideoGallery - Einspaltig
Große Videos in einer Spalte
Für größere Videos oder weniger Inhalt kann ein einspaltiges Layout verwendet werden.
Codebeispiel
<VideoGallerytitle="Lorem ipsum"subtitle="Dolor sit amet, consetetur sadipscing elitr"videos={videos}columns={1}/>