JS Animated. How to work with background video

Our support team is glad to present a new tutorial on working with background video in JS Animated templates.

In case your template contains a background video, you might need to replace it with another video or static image:

1. Connect to your FTP or FileManager on your hosting CPanel.

2. Open video folder. It contains 3 video files and 3 images.

3. Your video should be uploaded as 3 files: video.ogv, video.mp4 and video.webm to be displayed in all browsers correctly. In case you have it in one format only, you may create another needed versions using video converters, like free Any Video Converter tool.

4. As soon as your video files are ready, upload them to server, replacing demo files. In this case your video will appear on your website.

5. If you need to replace video with a static image, just rename or delete video files from video folder on server. video.gif, video.png and video.jpg image files are used as background-image in case video files are not loaded. Please note that on mobile devices static image is always displayed instead of video itself: in Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled by default.

6. In order to change video parameters, you should edit script.js file that is located in /js directory on server. It contains this code:

   		/* Video library 
   		========================================================*/ 
   		include('js/jquery.vide.js'); 
   		$(document).ready(function () { 
   		$("#home").vide("video/video",{ 
   		volume: 1, 
   		playbackRate: 1, 
   		muted: true, 
   		loop: true, 
   		autoplay: true, 
   		position: "50% 50%" // Alignment 
   		}); 
   		$('#home video').fadeOut(0).delay(200).fadeIn(800); 
   		});
   		

   You may change volume of video sound here, choose if it should be autoplayed and repeated, etc.

Feel free to check the detailed video tutorial below: