Things to know:

  • Make sure that you tried the site on a live server, not locally.
  • The video cannot play on mobile because of the technology limitation. Since we use a javascript "technology" with html5, playing video in a html background is not supported by 90% of mobiles. In that case, we replace your video by a background image.


First, to use the video feature, you need to tell the template that you want to use video has the main feature:

In your Index.html file find this line

<link class="preset" rel="stylesheet" href="assets/css/colors/photo.css">

 replace it with

<link class="preset" rel="stylesheet" href="assets/css/colors/video.css">


Then open assets/css/colors/video.css

find this line

#bg-image { background-image: url(../../img/background.jpg); }

You will see that the background image used is background.jpg. This is the image used on mobile or when people cannot see the video.

So go to assets/img/ and overwrite the background.jpg image by your. (it should be called background.jpg)

The size of this image should be 1920x1080. Since Xenon is responsive, the image will be scaled according to the screen.


To make the video works, you need to add the youtube video ID within the index.html file

Open index.html

Look for the string:


Put your YouTube Video ID. The video ID looks similar to this: JF8BRvqGCNs
You can find the Youtube Video ID at the end of a Youtube URL: 


So, it would look like this:


Thats it. upload your file to your server and you're done :)