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