HTML. Working with videos

Let’s pretend you have a Multipurpose Website Template setup on your site and it uses RD Background Video for adding a page background video.

Sure thing, you will face the question on how to change or add video background for your content, add fullwidth video to site pages.

Thus, it is time to learn and try the tips below. We are more than happy to present you the easy and quick way to manage the videos.

1. You should be logged into your cPanel already since we need to look for File Manager where the site content is stored. Please, do it in case you have not logged in yet.
2. So, your video files should be uploaded to the server to work with them. Please, make sure to create a new folder or simply upload video files to the ‘video’ directory on your server.
   One of the most important things is that you should prepare 5 versions of the video in .mp4 format with different extensions for the correct functioning of the script. Also, for image display on mobile devices or PCs with low Internet speed 5 versions of the image in .jpg format should be ready as well, upload them to your server.

   For your convenience, we are showing the exact examples of your files titles. They 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); – video-xs.mp4
   sm — for Small Devices, Tablets (640x360px); – video-sm.mp4
   md — for Medium Devices, Desktops (854x480px); – video-md.mp4
   lg — for Large Devices, Screens (1280x720px); – video-lg.mp4
   xlg — for Extra Large Devices, Wide Screens (1920x1080px); – video-xlg.mp4

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

   video-(sm).mp4
   video-image-(lg).jpg

   [notice type=”warning”]Please, pay attention to the fact that site visitors 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. But there is the possibility to add a background image to show on mobile devices instead of the background video.

3. At this stage let’s replace the background video in the existing section of HTML code, change the video path in data-rd-video-path data attribute. The truth is that one exact example is worth a thousand words to read. So, for your convenience we are showing how the the complete code will look like and the part to change:
   NOTE: Thus, video/bg-video-2/bg-video-2 is the link to your video. Where video/bg-video-2/ is the path to your video files on the server and the last bg-video-2 part is the name of the video/images files.
4. In order to see the result of the code editing, please, save changes and refresh the appropriate page.

In case you aim to set a video background to some section or page, please, consider following next steps:

1. First, make sure you have created required files (check steps 1-2 of the previous section).
2. This step presupposes you have already opened the appropriate HTML files used for the page to modify in any code editor on your computer. If not yet, please, proceed.
3. In fact, Multipurpose templates use RD Background Video for adding a page background video. We are showing the basic code sample below:

   Note, please, that your page/section content goes where Your content goes here is.

4. Let’s check that the code is complete and no closing tag at the end of the section is forgotten otherwise the video will not function properly without closing div tag.
   Pay your attention, please, to the code above where you can see different attributes allowing you to change your video settings. These are the images size for different devices, autoplay, custom link, pre-loader, etc.
5. And again in order to see the result of the code editing, please, save changes and refresh the appropriate page.

We hope this article helped you to learn how to work with videos in HTML theme.

Your attention is highly appreciated! Stay tuned for our pieces of advice to best suit your preferences in the process of the theme customization.