PrestaShop product videos module - Showing videos on the main image gallery 1.2.0

It’s a popular and fancy way to display videos on the main image gallery to present your products to your customers, which can increase your conversion rate.

If you are looking for the feature of playing videos on the category page, then check this module Easy Video - PrestaShop 1.7 and 8 product video module

Prestashop product videos module For PrestaShop 8 and PrestaShop 1.7 and PrestaShop 1.6​

It's a popular and fancy way to use videos to present your items to your customers, using videos to present products can increase your conversion rate. Displaying videos on the main image gallery is the most natural way and most accessible way for your customers to watch them.
[vc_single_image source="external_link" external_img_size="278x156" alignment="left" onclick="custom_link" img_link_target="_blank" lazy_loading="true" custom_src="[URL]https://www.sunnytoo.com/wp-content/uploads/2018/08/prestashop-product-videos-module-video-preview.jpg[/URL]" link="[URL]https://youtu.be/URvRwj8D8yc[/URL]"]

10 Demos​

Global settings for demo product 1, 2 and 3.

• - Prepend video thumbnails to the beginning of image galleries.
• - Autoplay - ON.
• - Loop - ON.
• - Skin - Default.

Demo product 1 - Multiple mixed videos

• Compatible with the nice main image gallery and thumbnail gallery feature of panda theme and transformer theme.
• Multiple videos.
• Mixed MP4 and YouTube videos.
• Custom video thumbnails.
• Vertical align YouTube thumbnails.

Demo product 2 - Single MP4 video

• Autoplay and Loop is off on this video to show that those settings can be different on every video.

Demo product 3 - Multiple YouTube videos

• Youtube videos with custom thumbnails.

Global settings for demo product 4, 5 and 6.

• - Add play buttons to the first image of main image gallery and thumbnail gallery. Only the first video will be shown out.
• - Loop - ON.
• - Skin - Sublime.

Demo product 4 - Play button on the first image

• Autoplay - OFF

Demo product 5 (EN) - Multi-language support
Demo product 5 (FR) - Multi-language support

• Different videos for EN and FR.
• Autoplay - ON

Demo product 6 - YouTube

• Autoplay - ON
• Use Youtube native controls for Youtube videos.

Global settings for demo product 7 and 8.

• - Display a play button on the main image section, a player will show out when the user clicks on the button.
• - Skin - Youtube

Demo product 7 - Play button on the main image

• Autoplay - OFF

Demo product 8 - Autoplay video

• Autoplay - ON

Global settings for demo product 9 and 10.

• - Append videos to the end of thumbnail gallery.
• - Skin - Facebook
• - Autoplay - OFF

Demo product 9 - Multi-Self-Hosted videos
Demo product 10 - Multi-YouTube videos

Seven ways to display videos.​

1. Display a play button on the main image section, a player will show out when the user clicks on the button. This module will only show one video per product when in this option. This module will be albe to be compatible with all themes with this option.
2. Display a play button on the first image and its thumbnail. This module will only show one video per product when in this option. This module will be albe to be compatible with all themes with this option.
3. Add video thumnails to the beginning of product thumbnail gallery. If a vidoe does not have thumbnail, then product cover image will be used.
4. Add video thumnails to the end of product thumbnail gallery. If a vidoe does not have thumbnail, then product cover image will be used.
5. Add play icons to the beginning of product thumbnail gallery. Custom video thumbnails will be shown out.
6. Add play icons to the end of product thumbnail gallery. Custom video thumbnails will be shown out.
7. Add videos to the top or bottom of product description.

Compatibility.​

1. By using the two ways of displaying videos, this module is compatible with all themes.
2. By using the rest four ways of displaying videos, this module is compatible with most PrestaShop themes including

• Panda theme v1, v1 for thirtybees and Panda theme v2.
• Transformer theme v4
• PrestaShop 1.7's Classic
• PrestaShop 8's Classic
• PrestaShop 1.6's Default theme
• Alysum for PrestaShop 1.7
• Warehouse for PrestaShop 1.7

Because of Warehouse theme and Alysum theme don't show thumbnail gallery out, if a product just have one image, so you need to edit one file to make this module work fine.
For Warehosue theme, edit the \themes\warehouse\templates\catalog\_partials\_product_partials\product-thumbnails.tpl file, remove this code gt 1 from it.
For Alysum theme, I guess you need to edit the \themes\alysum\templates\catalog\_partials\product-cover-thumbnails.tpl. file.
Panda theme and Transformer theme have an option to show thumbnail gallery out when a product just have one image, so no need to edit files.
3. This module can't work fine for products which have no images.
4. This module can't work with the displaying thumbnails in "Grid view" option of Transformer theme and Panda theme.
It might not be compatible with some highly customized PrestaShop themes, but we can provide free help for integration, if we can't make it work with your theme, you will get full refund.

Self-hosted .mp4 video and YouTube video.​

Self-hosted .mp4 video

• - For short videos, videos less than 1 minute
• - Fit perfect, by using slef-hosted videos, you can crop you videos to be the same ratio/size as product images, so the can fix perfect fine.
• - Don't worry to much of self-hosted are too large to be loaded. For example the size of panda theme's main gallery images is 370x423, the size of 1 minute video in 370x423 and in media quality can be very small about 6M.
• - Self-hosted videos will start to be downloaded when they are started to play, no video frames will be downloaded at the beginning, so your site won't be slowed down, don't worry.

YouTube video

• - Generally videos can be loaded faster than self-hosted videos.
• - No related videos when a YouTube video ends, in order to don't distract your customers.
• - YouTube videos are all in landscape, so in most cases they can't fit well.

Multi-language support.​

If your videos have audio descriptions, then the Multi-language feature will be useful to display different versions in different languages.

Highly customizable video player.​

Five predefined skins for video player, beside that there are dozens of options to change colors of play button and video controllers.

Autoplay feature​

Autoplay feature is NOT a guarantee that your videos will autoplay, because of some browsers do not allow autoplay for some reason, sometimes slow network connection may also cause autoplay not working. Know more about autoplay

Advanced settings​

There is a section called "Advanced settings" on the back office of this module. If this module is not compatible with your theme by default, then advanced settings can be used to make the module be compatible with your theme without editing files, generally don't touch advanced settings, do changes under our instructions.

Other features​

• "Autoplay", "loop" and "mute" these settings can be different on every video.
• Ability to use YouTube native controllers for YouTube videos.
• Show videos on the Quick view window.
• Custom CSS code

How to install and upgrade.​

How to install? Use the "Upload a module" button on "BO > Modules" page to install the module. Here is a video guide: PrestaShop product videos module.
How to upgrade?
Use the "Upload a module" button on "BO > Modules" page to upload the new version to your site, it's the same as how to install, don't worry all your data will be safe, prestashop will just upload updated files to your site, it won't reinstall this module.

How to get support.​

If you have any questions with the module, post them out on the prestashop module support forum, we'll help you out.

Documentation​

1. How to upload mp4 videos to my website.
Videos are often too large to be uploaded via browser, so upload them by via ftp, it's recommended to upload video to the /upload/ folder of your website.
2. Video format.
MP4 is the best, because all browsers support MP4. If your video are not in .mp4, then use this great tool to convert them to be in .mp4 MiroVideoConverter.
3. Why videos are not fitting well.
Because the dimension of your videos is not the same as your product images, in this case, videos will be placed in the middle center, that's why there are spaces on left&right sides or top&bottom sides. You can change the player background to change the color of those spaces.
4. Why videos and video thumbnails displaying in the wrong dimensions.
This may happen if a product has no images, because your "no-image" placeholders are in the wrong dimensions, which causes videos to be in the wrong dimensions, regenerating thumbnails for product images may be able to fix the problem.
5. Nothing happens when I click on video thumbnails, If I set the "Product thumbnails on desktop devices" setting to "Grid".
You need to set the "Thumbnail container" setting to
.pro_gallery_thumbs .swiper-wrapper
6. The video player is affected by the zoom feature.
If you are using a zoom feature that affects the video player from working, then increase the value of the "Z-index" field to a very large number, like 10000
7. Hide the vidoe control bar at runtime.
Put this code to the custom css code field.