{"id":39401,"date":"2015-02-02T05:12:38","date_gmt":"2015-02-02T10:12:38","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=39401"},"modified":"2015-02-04T06:03:57","modified_gmt":"2015-02-04T11:03:57","slug":"js-animated-work-background-video","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-work-background-video.html","title":{"rendered":"JS Animated. How to work with background video"},"content":{"rendered":"<p>Our support team is glad to present a new tutorial on working with <strong>background video<\/strong> in JS Animated templates.<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=V_b7l1DhqJU?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to work with background video<\/a>\r\n<p>In case your template contains a background video, you might need to replace it with another video or static image:<\/p>\r\n\r\n<ol>\r\n\t<li><p>Connect to your<strong> FTP or FileManager on your hosting CPanel<\/strong>.<\/p><\/li> \r\n\t<li><p> Open <strong>video<\/strong> folder. It contains 3 video files and 3 images.<\/p>\r\n\t<\/li>\r\n\t<li><p>Your video should be uploaded as 3 files: <strong>video.ogv, video.mp4 and video.webm<\/strong>  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 <a href=\"http:\/\/www.any-video-converter.com\/products\/for_video_free\/\" rel=\"nofollow\" target=\"_blank\"> Any Video Converter<\/a> tool. <\/p><\/li>\r\n\t<li><p>As soon as your video files are ready, upload them to server, <strong> replacing<\/strong> demo files. In this case your video will appear on your website.<\/p><\/li>\r\n\t<li><p>If you need to replace video with a static image, just rename or delete video files from <strong>video<\/strong> folder on server. <strong> video.gif, video.png and video.jpg <\/strong> image files are used as background-image in case video files are not loaded. <strong> Please note <\/strong> 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.<\/p><\/li>\r\n\t<li><p>In order to change video parameters, you should edit <strong> script.js<\/strong> file that is located in <strong> \/js<\/strong> directory on server. It contains this code:<\/p>\r\n\t\t<pre class=\"brush:js\">\r\n\t\t\/* Video library \r\n\t\t========================================================*\/ \r\n\t\tinclude('js\/jquery.vide.js'); \r\n\t\t$(document).ready(function () { \r\n\t\t$(&quot;#home&quot;).vide(&quot;video\/video&quot;,{ \r\n\t\tvolume: 1, \r\n\t\tplaybackRate: 1, \r\n\t\tmuted: true, \r\n\t\tloop: true, \r\n\t\tautoplay: true, \r\n\t\tposition: &quot;50% 50%&quot; \/\/ Alignment \r\n\t\t}); \r\n\t\t$('#home video').fadeOut(0).delay(200).fadeIn(800); \r\n\t\t});\r\n\t\t<\/pre>\r\n\t\t<p>You may change volume of video sound here, choose if it should be autoplayed and repeated, etc.<\/p>\r\n\t<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=V_b7l1DhqJU?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How to work with background video<\/a>","protected":false},"excerpt":{"rendered":"<p>Our support team is glad to present a new tutorial on working with background video in JS Animated templates.<\/p>\n","protected":false},"author":59,"featured_media":43475,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1008,2411,527],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/39401"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/59"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=39401"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/39401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43475"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=39401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=39401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=39401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}