Background Video

Mit dem Grid Element "Background wrapper" können auch Youtube Videos im Background eingebunden werden (ab v.4.1.5).

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.

GE "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 Grid Element "Background-wrapper" unter "Erscheinungsbild" im Tabulator "Youtube Video" kannst Du den Scrennshots "Tab Youtube Video" und "Tab Youtube Video ff" entnehmen.

Im Tabulator "Youtube Video - Filter", befinden sich 9 Filter (u.a. Grayscale, Sepia, Opacity).
Hier habe ich keine Einstellungen gemacht.

Damit der Hintergrund des optionalen Conten Elements über dem Video, nicht über die gesamte Breite geht, habe ich im "Background-wrapper" unter "Erscheinungsbild" im Auswahlfeld "Container" den Container ausgewählt.

CE im "Background-wrapper"

Das Content Element im Gridelement "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;.

Stylesheet

Für das Video habe ich "Autoplay" aktiviert. Leider wird dann kein "Thumbnail" geladen und es ist u.U. erstmal nichts zu sehen, ausser das Content Element im "Background wrapper".

Um dieses zu vermeiden und vorab ein "loading.gif" zu zeigen, bevor das Video geladen ist, habe ich folgendes CSS hinzugefügt:

#page-67 .jumbotron {
    background: #343a40 url("/fileadmin/Resources/Public/Icons/loading.gif") no-repeat center center;
}

#page-67 #c442 {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 3s linear;
}

#page-67.video-loaded #c442 {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 3s linear;
}

/* depends on your breakpoint settings */
@media (max-width:767px) {

  body#page-67 {
    padding-top: 0 !important;
  }

  body#page-67 #main-navbar.shrink {
    opacity:0;
  }
  body#page-67 #main-navbar.navbar-shrink.shrink {
    opacity:1;
  }

}

Erläuterung:

  • page-67 ist die id im body-tag
  • c442 ist die id vom CE im "Background-wrapper"
  • Die Klasse video-loaded wird dem body-tag hinzugefügt, wenn das Video geladen ist