TYPO3 introduces the CType media for embedded media. Local files (MP4, WebM, MP3, OGG) are stored directly as an FAL reference in the field assets . TYPO3 loads YouTube and Vimeo videos via the OnlineMediaHelper as virtual .youtube/.vimeo sys_files—the editor simply enters the video URL in the backend.
Insert the YouTube URL into the backend media-CE → TYPO3 recognizes the URL and creates a virtual .youtube-sys_file. In the frontend, an iframe embed is rendered, framed within Bootstrap’s ratio-wrappers.
Example: www.youtube.com/watch (Big Buck Bunny Trailer, Creative Commons)
Vimeo works the same way. Paste the Vimeo URL into the backend, and TYPO3 will create a virtual .vimeo-sys_file.
Example: vimeo.com/76979871 (The New Vimeo Player)
Upload MP4/WebM/OGG → select media-CE as the FAL reference. TYPO3 renders a native -tag with controls.
Recommended: two sources (MP4 as a fallback + WebM for modern browsers) and a poster image.
Similarly for MP3/OGG/WAV — TYPO3 renders a player. Example: chromatic scale (Wikimedia Commons, CC-BY-SA):
The T3Bootstrap template provides the JS component opt-in-video : YouTube/Vimeo embeds are loaded only after an explicit click—until then, only the poster image and consent button are displayed. Complies with GDPR/TTDSG without the need for a separate cookie banner integration.
Enabled per site via callToAction.socialLinks.*.optIn or the JS component key optinvideo in JsComponents.yaml.
CTypemediaassetsFAL reference to sys_file (local MP4/WebM/MP3 or virtual .youtube/.vimeo)
- Insert online media URL
In the backend, go to File Picker → "Add YouTube/Vimeo video" → Enter URL
- Lazy loading
iframe renders with
loading="lazy"automatically- Privacy Mode
opt-in-videoJS component → Click-to-Load with poster