Your theme’s slider allows you to set a video background for any slider panel. This is a great way to add mood, motion and flair to your website. The videos will appear full-width, autoplay and loop automatically.

Converting your video file

Video backgrounds require a self-hosted video file converted into two formats, one H.264-H.265 compatible .mp4 or .mpeg, and one .ogv. Two formats are needed to satisfy the HTML5 video standards defined by your visitor’s browser. For example, Firefox and Chrome support the .ogv file, whereas Safari requires the .mp4.

• You will need to create an mp4 and ogv of your source file. You can do this in any modern video editing software, or use a website such as this one
• Use hi-res videos of 720p or higher. They may be viewed on large desktop screens (1920 pixels wide) and smaller videos will pixelate if not HD.
• Keep your videos short – 1-5 minute clips are best and should loop cleanly for best results. This also keeps the file size down so the video does not take too long to load
• Consider removing sound from your videos unless it is integral to your site’s experience to avoid annoying your visitors.

Setup the Background

1. Click on Slider and then click Add New
2. Add your Title, content and excerpt as desired
3. Scroll down to the slider options panel and note the two self-hosted video file fields
4. Upload your videos by clicking on Add Media. Note that files over 2mb will fail. Reduce the video length or size if possible.
5. Once uploaded, select the video and copy the File URL from the right side and paste it into the corresponding self-hosted file field

Caviats

Video backgrounds require fast loading for a good user experience. Ensure your server is up to the task. We also recommend auto-slide not be used with video backgrounds if you notice lagging. This can be caused by the video loading holding up the script.