Hintergrund Video
Aus Contao Community Documentation
Version vom 31. März 2015, 22:45 Uhr von Ainschy (Diskussion | Beiträge)
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...
...
<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>
...
