Thinkport

Lorem ipsum

Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Lorem ipsum dolor sit

Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt 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.

VideoEmbed

Einzelnes Video mit Text

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

Codebeispiel

<VideoEmbed
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, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
sectionTitle="Lorem ipsum"
sectionSubtitle="Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
thumbnailPosition="left"
classes={{
  container: "max-w-7xl mx-auto",
  video: "rounded-lg shadow-xl",
  content: "prose prose-lg"
}}
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
url	string	YouTube Video-ID oder URL	-
title	string	Titel des Videos	-
subtitle	string	Untertitel/Beschreibung	-
sectionTitle	string	Überschrift über dem Video	-
sectionSubtitle	string	Unterüberschrift über dem Video	-
thumbnailPosition	'left' \| 'right'	Position des Videos (links oder rechts)	'left'
classes	object	CSS-Klassen-Overrides	{}

Wiki-Dokumentation Quellcode

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.

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="Lorem ipsum"
subtitle="Dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
thumbnailPosition="right"
/>

Wiki-Dokumentation Quellcode