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

<VideoGallery
title="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

BezeichnerTypBeschreibungDefault
titlestringHauptüberschrift-
subtitlestringUnterüberschrift-
videosVideoItem[]Array von Video-Objekten mit url, title, subtitle[]
columns1 | 2 | 3Anzahl der Spalten im Grid2
classesobjectCSS-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

<VideoGallery
title="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
videos={videos}
columns={1}
/>