PrestaShop 1.6.x. How to change video and how to replace video with static image (Video Background module)

Our Support team is ready to present you a new tutorial that will become an indispensable guide for managing Video Background module in your PrestaShop store.

PrestaShop 1.6.x. How to replace the video and how to change the vide to static image

Video Background module allows to add background video to any block in your HTML page (there should be the id or unique tag, we will show it later in this tutorial):

To add the background video or to replace it with another one, please follow the steps below:

1. Upload the video files and preview images to your server to modules/tmvideobackground/video folder (or any other folder on server) using FTP or hosting control panel.

   The video should be uploaded in 3 formats:

   • .mp4
   • .ogv
   • .webm

2. All of those 3 files should have exactly the same names. In our example the following files are responsible for the video that is shown at the front end at the moment:

   • video1.mp4
   • video1.ogv
   • video1.webm

   

   And those are the files for the new video which should replace the current one (we have just uploaded them to the server):

   • clothes.mp4
   • clothes.ogv
   • clothes.webm

   

3. Preview images should be also uploaded to server in 3 formats (in our example the title of preview images is clothes):

   • clothes.jpg
   • clothes.gifv
   • clothes.png

   

4. Now, please log into your PrestaShop admin panel and go to Modules->Modules:

   

5. Begin to type the name of the module in the Search field on the left. Press Configure button when it appears:

   

6. Let us explain text fields that you see inside the module one by one:

   • Video selector is the element of HTML page where the background video will be added (id or unique tag as “body”, “header”, “footer”, etc.). No other background should be added for this element to make the video displayed correctly.
   • Video path shows the path to your video files (please note that the path should have / at the end). The files can be located in any folder on server, but we recommend that you upload them to modules/tmvideobackground/video folder and preserve the template file structure.
   • Video files name is the names of your video files. Only name should be added in that area (there is no need to write format. In our case it is currently video1):

   

7. To replace/to add new video , replace/insert new filename in Video files name section. Our new files name will be clothes – the title of the video files that we have earlier uploaded to the server.

   Click Save button to apply changes to your store front end:

   

8. Refresh the front end to see the updated video:

   

9. If you want to replace background video with a static image, you need either to delete or to rename all of the video files on your server in modules/tmvideobackground/video folder.

   In our case we will rename all video files with title clothes, as this title was inserted to Video files name section in Video Background module on the previous steps:

   

10. Refresh the front end to see the changes. Static image named clothes from modules/tmvideobackground/video folder appears now instead of video (since video files are not affecting front end any more):

    

That’s it! Now you know how to replace the video or make static image appear instead of it in Video Background module of your Prestashop 1.6.x. store. Please feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to replace the video and how to change the vide to static image