MAGIX Hilfe-Center

Einbinden eines Hintergrundvideos

Das Einbinden von Hintergrundvideos gehört nicht zu den Standardfunktionen von MAGIX Web Designer.
Allerdings können Sie das mit etwas HTML-Kenntnissen trotzdem umsetzen.

Das Eingreifen in den Aufbau der Website über einen Quellcode wird von uns nicht unterstützt. Daher empfehlen wir ein solches Eingreifen nur, wenn Sie sich ein wenig mit HTML auskennen.

Der Quellcode muss über einen Platzhalter in Ihr Projekt eingefügt werden.

  • Ziehen Sie das Video, das im Hintergrund ablaufen soll, in Ihr Web-Designer-Projekt.
  • Klicken Sie im Web Designer mit der rechten Maustaste auf das Video-Element und wählen Sie "Webeigenschaften".
  • Klicken Sie im Reiter "Platzhalter" auf die Schaltfläche "HTML-Code (body)". Hier finden Sie den Quellcode für das Video.

Damit das Video im Hintergrund abgespielt wird müssen Sie noch einige Zeilen Quellcode hinzufügen.

Schreiben Sie in einer Zeile über dem Quelltext:

<div id="videobg">

 In einer Zeile darunter:

</div>

 Ihr Quellcode im "body" muss dann ungefähr so aussehen: 

<div id="videobg">
<video class="xar_meplayer" src="index_htm_files/videoname.mp4" controls autoplay width = "100%" height="100%"/>
</div>

Bestätigen Sie mit "OK" und klicken Sie auf die Schaltfläche "HTML-Code (head)".
Kopieren Sie diesen Quelltext hinein:

<style type="text/css">
* {
margin: 0;
padding: 0;
}
#videobg {
position: fixed;
z-index: 0;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
opacity: 1;
overflow: hidden;
}
video{
position: absolute;
z-index: 0;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
}
</style>

Bestätigen Sie beide offenen Fenster mit "OK" und überprüfen Sie das Ergebnis in der Vorschau.

Achten Sie darauf, dass der HTML-Platzhalter in der Ebene ganz unten ist, sonst überdeckt das Video alle tiefer liegenden Elemente.