If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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.

JS Animated. How to work with background video

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:

JS Animated. How to work with background video