Hintergrund Videos in Artikeln

Nachfolgend wird eine Möglichkeit beschreiben, in Artikeln ein Hintergrund-Video dar zu stellen. Das ist nur ein Beispiel, wie es grundsätzlich möglich ist und worauf man achten muss, damit die Ebenen des Videos und des Artikel-Vordergrundes bzw. Textes richtig "gestapelt" werden und auch entsprechend in die richtigen Container verpackt werden. Ggf. ist für die eigenen Zwecke noch Nacharbeit erforderlich oder auch die ID-Namen sind anzupassen, damit sie nicht doppelt vorkommen.

Wie ist das Ganze aufgebaut? Es gibt einen Container, der sowohl den Video-Container als auch den Vordergrund Text enthällt. Dieser (#MyContainer) wird mit "position: relative;" relativ zur linken, oberen Ecke des Artikel-Containers positioniert. Alle weiteren Angaben beziehen sich auf diesen Container. Mit "#MyContainer video" greift man auf das spezielle Video tag in unserem Container zu. Dieses wird in der Mitte platziert, absolut, bezogen auf den umgebenden Container. Mit den Angaben left, top, wird die Position des Videos angegeben, 50%, 50%, das "transform: translate(-50%, -50%);" positioniert es mittig.

Wie stapelt man nun die Ebenen übereinander? Eine Regel besagt, die ebene werden nach ihrem Erscheinen im Quelltext gestapelt, was zuerst steht, liegt zu unters - oder man bestimmt mittels z-index die Lage. Wir tun beides, z-index:0; setzt unseren Container fürs Video - #MyContainer Video - auf die Ebene 0, Der div Contaner, welchen dann unseren Text enthällt wird auf z-index: 10 gesetzt, also in den Vordergrund geschoben.

Hier die CSS Anweisungen für die verschiedenen Container (Diese kann man in der Global CSS Section im ACP ablegen, zum Testen):

#MyContainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#MyContainer video {
  position: absolute;
  left: 50%;
  top: 50%;
  /* The following will size the video to fit the full container. Not necessary, just nice.*/
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

#MyContainer div {
  position: relative;
  z-index: 10;
}

Und das zugehörihe HTML, welches ihr in der Quelltextanzeige eures Artikels rein kopiert

<div id="MyContainer" style="left:0px; top:0px; z-index:1;background: #transparent;color: #fff;min-width:100%;min-height:800px;width:auto;height: auto;">

  <div style="left:0px; top:0px; z-index:-10;">
  <video width="auto" height="auto" id="video_background" preload="auto" autoplay="autoplay" loop="loop" muted="muted" volume="0"> 
  <source src="https://wrhel.de/maledicta/portal/data/74f55f9090e2085a6f57d201341bb465/files/system/UPLOADS/Videos/2019-03-10_17-29-54.mp4" type="video/mp4" /> 
  Video not supported </video></div>
  <span style="font-weight:bold;">
Beispieltext
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
</div>

Beispiel als jsfiddle: Hindergrund-Videos in Eqdkp-Artikeln

Soviel zur allgemeinen Theorie. im Netzfindet ihr viele Anleitungen, wo das Ganze noch ausführlicher behandelt wird. Wie kann ich nun meinen Text im EQDKP-Plus editieren - ganz einfach, normal editieren und fertig, es müssten alle Funktionen funktionieren. Es könnte sein, dass ihr links oben in der Ecke des Editors einen Punkt seht, lasst den bitte dort, damit zeigt euch der Editor an, das da noch was ist - nämlich euer Video. Beachtet auch, das die Editoranzeigen unterschiedlich sind, je nach dem in welchem Editormodut ihr den Artikel öffnet und bearbeitet. Eins ist auch klar - keine Gewähr für einwandfreie Funktion oder Fehlerfreiheit.

Wenn ihr Verbesserungen dazu habt oder auch Fehlerkorrekturen, dann lasst es mich bitte wissen.