Video / Audio

TYPO3 bringt den CType media für eingebettete Medien mit. Lokale Dateien (MP4, WebM, MP3, OGG) werden direkt als FAL-Referenz im Feld assets gepflegt. YouTube- und Vimeo-Videos lädt TYPO3 über den OnlineMediaHelper als virtuelle .youtube/.vimeo sys_files — der Editor gibt im Backend einfach die Video-URL ein.

YouTube-Embed

YouTube-URL im Backend ins media-CE einfügen → TYPO3 erkennt die URL und legt ein virtuelles .youtube-sys_file an. Im Frontend wird ein iframe-Embed gerendert, eingerahmt in Bootstraps ratio-Wrapper.

Beispiel: www.youtube.com/watch (Big Buck Bunny Trailer, Creative Commons)

Vimeo-Embed

Vimeo funktioniert analog. Im Backend Vimeo-URL einfügen, TYPO3 legt ein virtuelles .vimeo-sys_file an.

Beispiel: vimeo.com/76979871 (The New Vimeo Player)

Lokales Video

MP4/WebM/OGG hochladen → im media-CE als FAL-Referenz wählen. TYPO3 rendert einen nativen <video>-Tag mit Controls.

<video controls preload="metadata" poster="...">
  <source src="/fileadmin/.../demo.mp4" type="video/mp4">
  <source src="/fileadmin/.../demo.webm" type="video/webm">
</video>

Empfohlen: zwei Quellen (MP4 als Fallback + WebM für moderne Browser) und ein Poster-Bild.

Audio

Analog für MP3/OGG/WAV — TYPO3 rendert einen <audio controls>-Player. Beispiel: chromatische Tonleiter (Wikimedia Commons, CC-BY-SA):

Privacy / opt-in-video

Das T3Bootstrap-Template liefert die JS-Komponente opt-in-video mit: YouTube/Vimeo-Embeds werden erst nach explizitem Klick geladen — bis dahin nur das Poster-Bild + Consent-Button. Erfüllt DSGVO/TTDSG ohne separate Cookie-Banner-Integration.

Aktiviert pro Site über callToAction.socialLinks.*.optIn bzw. JS-Component-Key optinvideo in JsComponents.yaml.

Konfiguration

CType

media

assets

FAL-Referenz auf sys_file (lokale MP4/WebM/MP3 oder virtuelles .youtube/.vimeo)

Online-Media-URL einfügen

Im Backend Datei-Picker → "Add YouTube/Vimeo video" → URL einfügen

Lazy-Loading

iframe rendert mit loading="lazy" automatisch

Privacy-Mode

opt-in-video JS-Component → Click-to-Load mit Poster