Video-Hintergrund mit Html5

Wenn Sie einen Live-Hintergrund einbetten wollen, gehen Sie auf „Design -> Editor“ und wählen die Datei aus,
in der das Video eingebunden werden soll, z.B. „front-page.php“ (Statische Startseite).

Hier fügen Sie ans Ende der Datei den src-code ein, der zur Video-Datei führt, z.B.:

<video class=“BG“ autoplay=“autoplay“ loop=“loop“ muted=““>
<source src=“http://www.cinemagramme.de/video/Cinemagramme/Cinegramm-StadtAmMeer-1-wz.mp4″ type=“video/mp4″ />
</video>

Zuletzt müssen Sie noch die Style-Eigenschaften anpassen, um die Datei als Hintergrund zu definieren. Dies wird
in der Datei „styles.css“ (Stylesheet) vorgenommen:


/* Custom Styles */
.BG {
position:fixed;
width:100%;
height:auto;
top:0px;
left:0px;
z-index:1;
}

Damit das Hintergrundbild über die ganze Seite erscheint, muss der Hintergrund für den Content-Bereich auf „none“ gesetzt werden:


/* Custom Styles */
#content {
background:none !important;
  /* wichtig, damit folgende style-defs für „content“ ignoriert werden */
}