{"id":75531,"date":"2016-09-08T10:22:25","date_gmt":"2016-09-08T14:22:25","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=75531"},"modified":"2016-10-17T03:43:27","modified_gmt":"2016-10-17T07:43:27","slug":"js-animated-change-rd-background-video","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-change-rd-background-video.html","title":{"rendered":"JS Animated. How change RD background video"},"content":{"rendered":"<p>This tutorial shows the way to change RD background video in Responsive Website Templates.<\/p>\r\n<div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/FXQoq31NVgc\"><\/iframe>\r\n<\/div>\r\n<p>If your template uses <strong>RD Video Player<\/strong> extension for implementing a video player, you should perform the following steps to change the <strong>RD background video<\/strong>:<\/p>\r\n<ol> \r\n\t<li><p>Connect your FTP or open File Manager tool in your hosting control panel to access the theme files.<\/p><\/li>\r\n\t<li><p>Firstly you should upload your video files to the server. You can create a new folder or just upload video files to the <strong>video<\/strong> directory on your server.<\/p>\r\n\t\t<p>Prepare <strong>5<\/strong> versions of the video in <strong>.mp4<\/strong> format with different extensions for the correct functioning of the script. Moreover, prepare <strong>5<\/strong> versions of the image in <strong>.jpg<\/strong> format for image display on mobile devices or PCs with low Internet speed.<\/p>\r\n\t\t<p class=\"attention\">IMPORTANT: Please, name the files the following way:<\/p>\r\n\t\t<ul class=\"list\">\r\n\t\t\t<li><p><strong>video-(suffix).mp4<\/strong><\/p><\/li>\r\n\t\t\t<li><p><strong>video-image-(suffix).jpg<\/strong><\/p><\/li>\r\n\t\t<\/ul>\r\n\t\t<p>Here is the list of extensions, which you should prepare, and their suffixes:<\/p>\r\n\t\t<ol>\r\n\t\t\t<li><p><strong>xs<\/strong>  &#8211; for Extra Small Devices, Phone (380x240px);          &#8211; video-xs.mp4 <\/p><\/li>\r\n\t\t\t<li><p><strong>sm<\/strong>  &#8211; for Small Devices, Tablets (640x360px);              &#8211; video-sm.mp4 <\/p><\/li>\r\n\t\t\t<li><p><strong>md<\/strong>  &#8211; for Medium Devices, Desktops (854x480px);            &#8211; video-md.mp4 <\/p><\/li>\r\n\t\t\t<li><p><strong>lg<\/strong>  &#8211; for Large Devices, Screens (1280x720px);             &#8211; video-lg.mp4 <\/p><\/li>\r\n\t\t\t<li><p><strong>xlg<\/strong> &#8211; for Extra Large Devices, Wide Screens (1920x1080px); &#8211; video-xlg.mp4 <\/p><\/li>\r\n\t\t<\/ol>\r\n\t\t<p>As a result, you should have 10 files: 5 video files and 5 images. See an example on the screenshot below:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video1-300x169.jpg\" alt=\"js_animated_how_change_rd_background_video1\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75532\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video1-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video1-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video1-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t\t\r\n\t\t<p>You can use different video converters to convert your video to the required extension easily. Some useful information about popular video converters you will find via <a href=\"http:\/\/filmora.wondershare.com\/video-editing-tips\/how-to-resize-video-files.html\" target=\"_blank\">this link<\/a>. Feel free to check <a href=\"http:\/\/www.online-tech-tips.com\/computer-tips\/how-to-resize-a-video\/\" target=\"_blank\">this documentation<\/a> as well.<\/p>\r\n\t<\/li>\r\n\t<li><p>When all the required video files are uploaded to the server, open a <strong>.html<\/strong> file that controls your page with a RD background video and find the similar code in the file:<\/p>\r\n<pre class=\"brush:html\">\r\n\t&lt;div data-rd-video-path=&quot;video\/bg-video-3\/bg-video-3&quot; data-rd-video-image-xs=&quot;16&quot; data-rd-video-image-sm=&quot;16&quot; data-rd-video-image-md=&quot;22&quot; data-rd-video-image-lg=&quot;41&quot; data-rd-video-image-xlg=&quot;41&quot; data-rd-video-autoplay=&quot;true&quot; data-rd-video-preload=&quot;metadata&quot; class=&quot;rd-video&quot;&gt;\r\n<\/pre>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video2-300x169.jpg\" alt=\"js_animated_how_change_rd_background_video2\" width=\"300\" height=\"169\" class=\"alignnone size-medium wp-image-75533\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video2-300x169.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video2-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video2-768x432.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/js_animated_how_change_rd_background_video2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\t\t\r\n\t\t\r\n\t<p>You can change the path to your video files in this code. You should edit the <strong>data-rd-video-path=&quot;video\/bg-video-3\/bg-video-3&quot;<\/strong> part, where <strong>video\/bg-video-3\/<\/strong> is the path to your video files on the server and the last <strong>bg-video-3<\/strong> is the name of the video\/images files.<\/p><\/li>\r\n\t<li><p>Save the changes in the file and refresh your site to see the changes applied.<\/p><\/li>\r\n<\/ol>\r\n<p>More information on <strong>RD Video Player<\/strong> extension that controls RD background video can be found via <a href=\"\/help\/quick-start-guide\/website-templates\/v1-2\/index.php?lang=en&amp;section=extensions#rd-audio-player\" target=\"_blank\">this link<\/a>.<\/p>\r\n<p>This is the end of the tutorial. Now you know how to change RD background video in Responsive Website Templates.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=FXQoq31NVgc?width=1280&amp;height=720\" rel=\"prettyPhoto\">JS Animated. How change RD background video<\/a>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows the way to change RD background video in Responsive Website Templates.<\/p>\n","protected":false},"author":53,"featured_media":75552,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[2415,2452,527],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75531"}],"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\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=75531"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75531\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/75552"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=75531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=75531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=75531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}