Multipurpose Website Templates. Working with videos

This tutorial is going to show you how to work with videos in Multipurpose Website Templates.

Multipurpose Website Templates use RD Background Video for adding a page background video. You can easily change, add video background for your content, add fullwidth video to site pages. Let’s take a closer look on how to work with videos.

To change background video, please, follow the steps below:

1. Connect to your server using FTP or hosting cPanel.

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

   Please, note! You should 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.

   Your files titles should be as follows:

   • video-(suffix).mp4

   • video-image-(suffix).jpg

   Where suffix is used for different extensions:

   • xs – for Extra Small Devices, Phone (380x240px);

   • sm – for Small Devices, Tablets (640x360px);

   • md – for Medium Devices, Desktops (854x480px);

   • lg – for Large Devices, Screens (1280x720px);

   • xlg – for Extra Large Devices, Wide Screens (1920x1080px);

   Your image video and image titles in this case will be:

   • video-(sm).mp4

   • video-image-(lg).jpg

   Note! You will see images displaying instead of the videos on your mobile devices and PC with low Internet speed. The video background option is disabled on mobile by default. You can add a background image to show on mobile devices instead of background video.

3. To change the background video in the existing section of HTML markup, change the video path in data-rd-video-path data attribute.

   Where video/bg-video-2/bg-video-2 is link for your video. Where video/bg-video-2/ is the path to your video files on the server and the last bg-video-2 is the name of the video/images files.

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

But what if you want to add video background to some section or page? Let’s do the following:

1. Make sure you have uploaded your videos and images files. Follow the steps from the previous section.

2. Open HTML files used for the page you wish to modify in any code editor on your computer.

3. Multipurpose templates use RD Background Video for adding a page background video. The basic markup looks the following way:

    
   			Your content goes here
   		
    

   Where Your content goes here is your page/section content.

4. Make sure you close div tag at the end of section. Video will not function properly without closing div tag.

5. From the code above you can see different attributes. They allow you to change your video settings. These are the images size for different devices, autoplay, custom link, pre-loader, etc.

6. Save file and upload the modified file to your server. Check your site to see the change.

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

Feel free to check the detailed video tutorial below:

Look through our recently updated selection and choose one of the film wordpress theme for your modern website.