Background Video
Das Backgroundvideo sollte im Format mp4 gespeichert werden. Zusätzlich können weitere Formate (ogg .usw) angegeben werden. Das Video wird dann in der Dateiverwaltung (fileadmin) von TYPO3 gespeichert.
Die Einbindung des (responsiven) Background-Videos erfolgt mit einem HTML-Inhaltselement.
Eine bgVideo.css kümmert sich um die Hintergrunddarstellung, um Position und Aussehen der Elemente. Im TYPO3 Theme werden diese Elemente mit einem Theme Box-Element gruppiert. Die bgVideo.css wird ganz gezielt auf genau den betreffenden Seiten im Frontend geladen. Die Datei kann angepasst werden und wird mittels Typoscript einfach im root-Template eingebunden.
Das folgende Beispiel zeigt die Einbindung des Backgroundvideos oben auf dieser Webseite,
Hier das HTML für das HTML-Element für das Video
<video class="responsive-video" autoplay muted loop>
<source src="/fileadmin/video/versuch_1.mp4" type="video/mp4">
versuch_1.mp4
</video>
Hier die Box. Das Video-Element immer als 1. Element und der Inhalt über dem Video als 2. Element:
Die bgVideo.css wird dann in die betreffenden Seiten mittels Typoscript im root-Template eingebunden. Folgendes Beispiel bindet die bgVideo.css auf der Seite 107 ein. Zudem wird in dem Beispiel das Box-Element auch auf Seite 107 im before Maincontent eingebunden, siehe hierzu before / after Maincontent. Hinweis: Man kann das Element auch direkt auf der Seite im einbinden dann entfällt die Angabe __pid = 106 natürlich. Folgendes Typoscript Setup wird ins root-Template über das Backend eingebunden:
# Background Video (Before Maincontent - bgVideo)
[page["uid"] == 107]
plugin.tx_typo3projectprovider.settings.maincontentBefore__pid = 106;
page.includeCSS.bgVideo = /fileadmin/typo3projectprovider/Resources/Public/Css/bgVideo.css
[END]
Die bgVideo.css kann hier heruntergeladen werden: Rechtsklick - Datei speichern unter - bgVideo.css Danach im fileadmin des gewünschten Projektes speichern und die page.includeCSS.bgVideo anpassen.
Die bgVideo.css selbst kann angepasst und erweitert werden (daher nicht im Git oder im Theme). Kommentare und Hinweise befinden sich direkt in der Datei.
