MAGIX Help Center

Adding a background video

The ability to add background videos is not a standard feature in MAGIX Web Designer.
However, this can still be done with a bit of HTML know-how.

We do not provide support for directly editing your website's source code. We therefore only recommend you attempt to do this if you are already somewhat familiar with HTML.

The first thing you need to do is to insert the source code into your project by adding a placeholder.

  • Drag the video you want to add to the background into your Web Designer project.
  • In Web Designer, right-click the video element and select "Web Properties".
  • Go to the "Placeholder" tab and click the "HTML Code (body)" button. This is where you'll find the source code for your video.

To make the video play in the background of your page, a few lines of code need to be added.

On a line above the source code, type the following:

<div id="videobg">

 On a line below the source code, type:

</div>

 The body of your source code should look something like this: 

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

Click "OK" to confirm your changes, then click the "HTML Code (head)" button.
Copy and paste the code below:

<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>

Click "OK" to close both open windows and check the preview to see if the video has been added.

Make sure the HTML placeholder is located on the bottom-most layer, otherwise the video will cover all the elements located on the layers below it.