Background Video
Mit dem Container Element "Background wrapper" können auch YouTube & Vimeo Videos im Background eingebunden werden.
Vimeo Videos werden ab Version 5.1.8 unterstützt!
Wie auch im Content Element "Text & Media", kann das Video im FAL - hier im Tabulator "Background-Image" - eingebunden werden.
Hier befindet sich auch die Option für "Autoplay", die das Video nach dem laden, automatisch startet.
Step by Step
Hier eine Beschreibung, wie ich das Video hier installiert und konfiguriert habe.
"Background-wrapper"
Das Video kann natürlich an jeder beliebigen Stelle im Content eingebunden werden, ich habe mich hier für den "Jumbotron" entschieden (Screenshot: BE "Backgroound-wrapper").
Die Einstellungen im Container Element "Background-wrapper" unter "Erscheinungsbild" im Tabulator "YouTube/Vimeo Video" kannst Du den Scrennshots "Tab YouTube/Vimeo Video" entnehmen.
Content im "Background-wrapper"
Das Content Element im Container "Background-wrapper" soll einen transparenten Hintergrund bekommen, daher habe ich im Tabulator "Erscheinungsbild" unter "Background color" rgba(255,255,255,0.8) eingetragen. Damit der Text einen Abstand zum Rand des Hintergrundes bekommt, habe ich unter "Extra Class" die Bootstrap Utility Klasse p-5 angegeben.
Im Auswahlfeld "Hiding / Display Elements" habe ich "Hidden on sm and down" ausgewählt, damit dieses CE auf kleinen Bildschirmen das Video nicht komplett überdeckt.
BE Modul "T3SB Config"
Hier noch einige Einstellungen, die ich im Backend Modul "T3SB Config" gemacht habe.
Unter "Jumbotron" habe ich die Position "Below the NavBar" ausgewählt und Container auf "none" gesetzt. In "Extra Class" habe ich p-0 m-0 eingetragen, damit der "Jumbotron" keine Abstände hat.
Unter "Navbar" habe ich im Auswahlfeld "Color schemes" die Option "bg-color" ausgewählt und das Eingabefeld "Background color" leer gelassen. Somit wird der Hintergrund transparent erstellt. Für die "Shrinking Navbar on scrolling" habe ich die Auswahl "navbar-dark" getroffen und für "Color-schemes" die Option "bg-primary" gewählt.
Info: In der Datei "custom-variables" habe ich u.a. folgende Einstellung: $primary: #563d7c;.
