Hintergrund Video

Aus Contao Community Documentation

Wie ihr mit dem <video>-Element in HTML5 Hintergrund-Videos realisiert

Der HTML-Code

Um ein Hintergrund-Video vollflächig einzusetzen kommt ihr nicht um hin die fe_page zu erweitern. Hierzu wird ein sogenannter Container eingefügt. Dieser hilft später beim ausrichten des Videos, der Inserttag erleichtert die spätere Bearbeitung im Backend. (Die eckige Klammern beim Inserttag sind zu entfernen!)

<body ...>
<div id="bgvideo">{[{]insert_module::hintergrund_video[}]}</div>
<?php $this->block('body')...>

Legt als nächstes das Modul "hintergrund_video" als HTML Modul an.

<video class="no-mejs" autoplay loop muted poster="files/layout/images/ALTERNATIVES-BILD.jpg">
	<source src="files/layout/video/VIDEO_IM_MP4-FORMAT.mp4" type="video/mp4">
	<source src="files/layout/video/VIDEO_IM_WEBM-FORMAT.webm" type="video/webm">
	<img src="files/layout/images/ALTERNATIVES-BILD.jpg" width="1920" height="1080">
</video>

Das Video sollten in den Formaten mp4 und webm vorliegen, ein Fallback-Bild für Browser die das Video-Element nicht unterstützen wird empfohlen.

Der CSS Code

#bgvideo {
    bottom:0;
    left:0;
    right:0;
    top:0;
    position:fixed;
    overflow:hidden;
    background: 50% 50% no-repeat;
    background-size: cover;
}
#bgvideo video {
    min-width:100%;
    min-height:100%;
    left:50%;
    top:50%;
    position:absolute;
    display:inline-block;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

j_mediaelement anpassen

Legt ein eigenes j_mediaelement.html5 unter Templates an, kopiert hierzu das existierende Template j_mediaelement.html5 und ändert es wie unter stehend ab. Erweitert werden die Angaben um videoWidth: 100%, und videoHeight: 100% damit wird z.B. das Inhaltselement Youtube auf 100% Breite und entsprechender Höhe ausgedehnt. Für das Hintergrund-Video ist das nicht wichtig aber für Responsive Webseiten unverzichtbar. Für das Hintergrund-Video ist hingeben die Angabe

$('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementpla...

wichtig, da die Klassen-Anweisung im Video-Tag an dieser Stelle dafür sorgt das jQuery unser Hintergrund-Video ignoriert.

...
<script>
  (function($) {
    $(document).ready(function() {
      $('video:not(.no-mejs),audio:not(.no-mejs)').mediaelementplayer({
        // Put custom options here
        videoWidht: '100%',
        videoHeight: '100%',
        pluginPath: '<?php echo TL_PATH; ?>/assets/jquery/mediaelement/<?php echo $GLOBALS['TL_ASSETS']['MEDIAELEMENT']; ?>/',
        flashName: 'legacy/flashmediaelement.swf',
        silverlightName: 'legacy/silverlightmediaelement.xap'
      });
    });
  })(jQuery);
</script>
...
Ansichten
Meine Werkzeuge

Contao Community Documentation

Nur weil es bei Nachbarseite XYZ was gibt, wird automatisch oft davon ausgegangen, dass das fertige Bauteil einsatzbereit auf der Straße liegt.

Marie Dietz
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge