Video-Komponenten

Die Video-Komponenten ermöglichen es, Videos auf responsive und ansprechende Weise in deine Seite einzubinden. Sie unterstützen YouTube und Vimeo und bieten verschiedene Layout-Optionen.

VideoEmbed

Die VideoEmbed-Komponente ist für einzelne Videos mit begleitendem Text konzipiert.

Lorem ipsum

Dolor sit amet, consetetur sadipscing elitr

Video wird nach Cookie-Zustimmung geladen

Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.

VideoEmbed

Einzelnes Video mit Text

Die VideoEmbed-Komponente zeigt ein Video mit begleitendem Text in einem zweispaltigen Layout an. Sie unterstützt YouTube und Vimeo URLs und bietet flexible Positionierungsoptionen.

Codebeispiel

<VideoEmbed
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
thumbnailPosition="right"
classes={{
  container: 'my-custom-container',
  content: 'my-custom-content',
  video: 'my-custom-video'
}}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
url	string	YouTube- oder Vimeo-URL des Videos	-
title	string	Titel des Videos	-
subtitle	string	Optionaler Untertitel	-
sectionTitle	string	Titel der gesamten Sektion	-
sectionSubtitle	string	Untertitel der gesamten Sektion	-
thumbnailPosition	'left' \| 'right'	Position des Videos relativ zum Text	'left'
classes	object	Anpassbare CSS-Klassen	{}

Fragments

Bezeichner	Beschreibung	Default
default	Zusätzlicher Inhalt neben dem Video

Wiki-Dokumentation Quellcode

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.

VideoEmbed - Video rechts

Alternative Positionierung

Das Video kann auch rechts vom Text positioniert werden.

Codebeispiel

<VideoEmbed
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Consetetur sadipscing"
subtitle="Elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
thumbnailPosition="right"
/>

Wiki-Dokumentation Quellcode

Lorem ipsum

Dolor sit amet, 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.

VideoEmbed - Mit Sektionstitel

Komplette Sektion mit Überschrift

Die Komponente kann auch mit einem Sektionstitel und -untertitel verwendet werden.

Codebeispiel

<VideoEmbed
url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
sectionTitle="Lorem ipsum"
sectionSubtitle="Dolor sit amet, consetetur sadipscing elitr"
title="Sed diam nonumy eirmod"
subtitle="Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."
thumbnailPosition="left"
/>

Wiki-Dokumentation Quellcode

VideoGallery

Die VideoGallery-Komponente ermöglicht es, mehrere Videos in einem responsiven Grid anzuordnen.

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.

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.

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"
subtitle="Dolor sit amet, consetetur sadipscing elitr"
videos={[
  {
    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    title: "Lorem ipsum",
    subtitle: "Dolor sit amet"
  },
  {
    url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    title: "Consetetur sadipscing",
    subtitle: "Elitr, sed diam"
  }
]}
columns={2}
classes={{
  container: 'my-custom-container',
  grid: 'my-custom-grid',
  item: 'my-custom-item'
}}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
title	string	Titel der Galerie	-
subtitle	string	Untertitel der Galerie	-
videos	VideoItem[]	Array von Video-Objekten	[]
columns	1 \| 2 \| 3	Anzahl der Spalten	2
classes	object	Anpassbare CSS-Klassen	{}

Wiki-Dokumentation Quellcode

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}
/>

Wiki-Dokumentation Quellcode

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

Video wird nach Cookie-Zustimmung geladen

Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.

Consetetur sadipscing

Elitr, sed diam

Video wird nach Cookie-Zustimmung geladen

Bitte „YouTube Video“ in den Cookie-Einstellungen aktivieren.

Sed diam nonumy

Eirmod tempor invidunt

VideoGallery - Dreispaltig

Kompakte Darstellung vieler Videos

Für viele Videos kann ein dreispaltiges Layout verwendet werden.

Codebeispiel

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

Wiki-Dokumentation Quellcode