JS Animated. How change RD background video

This tutorial shows the way to change RD background video in Responsive Website Templates.

If your template uses RD Video Player extension for implementing a video player, you should perform the following steps to change the RD background video:

1. Connect your FTP or open File Manager tool in your hosting control panel to access the theme files.

2. Firstly you should upload your video files to the server. You can create a new folder or just upload video files to the video directory on your server.

   Prepare 5 versions of the video in .mp4 format with different extensions for the correct functioning of the script. Moreover, prepare 5 versions of the image in .jpg format for image display on mobile devices or PCs with low Internet speed.

   IMPORTANT: Please, name the files the following way:

   • video-(suffix).mp4

   • video-image-(suffix).jpg

   Here is the list of extensions, which you should prepare, and their suffixes:

   1. xs – for Extra Small Devices, Phone (380x240px); – video-xs.mp4

   2. sm – for Small Devices, Tablets (640x360px); – video-sm.mp4

   3. md – for Medium Devices, Desktops (854x480px); – video-md.mp4

   4. lg – for Large Devices, Screens (1280x720px); – video-lg.mp4

   5. xlg – for Extra Large Devices, Wide Screens (1920x1080px); – video-xlg.mp4

   As a result, you should have 10 files: 5 video files and 5 images. See an example on the screenshot below:

   

   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 this link. Feel free to check this documentation as well.

3. When all the required video files are uploaded to the server, open a .html file that controls your page with a RD background video and find the similar code in the file:

   	<div data-rd-video-path="video/bg-video-3/bg-video-3" data-rd-video-image-xs="16" data-rd-video-image-sm="16" data-rd-video-image-md="22" data-rd-video-image-lg="41" data-rd-video-image-xlg="41" data-rd-video-autoplay="true" data-rd-video-preload="metadata" class="rd-video">
   

   

   You can change the path to your video files in this code. You should edit the data-rd-video-path="video/bg-video-3/bg-video-3" part, where video/bg-video-3/ is the path to your video files on the server and the last bg-video-3 is the name of the video/images files.

4. Save the changes in the file and refresh your site to see the changes applied.

More information on RD Video Player extension that controls RD background video can be found via this link.

This is the end of the tutorial. Now you know how to change RD background video in Responsive Website Templates.

Feel free to check the detailed video tutorial below: