JS Animated. How to work with Vide – Background video

Our Support team is ready to present you a new tutorial that shows how to work with Vide – Background video in Website templates.

JQuery plugin “Vide” is used to implement background video functionality to our Website templates. Video is added to section background by using special script. Different browsers support different video formats, therefore to ensure cross-browser functionality, please perform the following steps:

1. Convert your video file into 3 formats: *.mp4, *.ogv, *.webm. File names have to match (for example, video_1.mp4, video_1.ogv, video_1.webm). You can follow this video guide on how to convert video files.

2. Prepare an image to display it in browsers that do not support background video, including mobile devices (for example, video_1.jpg).

3. Connect to your FTP or open hosting cPanel File manager tool to reach site files and upload video files to ‘video’ folder:

   

4. Open your *.html file to add new videos to the page. In our case it’s index.html file.

5. In the appropriate block with .vide class specify path to previously created files in data attribute data-vide-bg. Please do not specify files extension. For example:

    Your content 

   Here video/video_1 is the path to your video file (without format extension). You can also change the content shown below:

   

6. Save changes and re-upload file back to server if you’re using FTP. Next, refresh the site page to see changes applied:

   

Feel free to check the detailed video tutorial below: