PS PrestaShop Beginner

DataFirefly Product Video

User guide for the DataFirefly Product Video module: adding videos (MP4, YouTube, Vimeo) to the PrestaShop product gallery.

Updated Module version 1.0.0

Overview

DataFirefly Product Video adds videos directly into the thumbnail gallery of the PrestaShop product page, alongside the images. Three sources are supported: hosted files (MP4, WebM, OGG), YouTube and Vimeo. Each video has its own poster, playback options and a customisable position.

  • Compatibility: PrestaShop 8.0 to 8.9
  • Multistore: yes
  • Multilingual: title and description translatable per language
  • Version: 1.0.0

Installation

  1. In the back office, go to Modules > Module Manager.
  2. Click Upload a module and select the dfproductvideo.zip file.
  3. The module automatically creates its tables and the upload folders (img/dfproductvideo/videos and img/dfproductvideo/posters).
  4. Click Configure to set the default options.

Global configuration

The configuration page defines the values applied by default to every new video:

  • Autoplay – automatic playback (muted mode is required by Chrome and Safari).
  • Muted – mandatory when autoplay is enabled.
  • Loop – plays the video continuously.
  • Show controls – native playback bar.
  • Lazy loading – loads the video only when it becomes visible.
  • Lightbox / Fullscreen – opens the video in an overlay.
  • Responsive – adapts to the screen width.
  • Analytics – counts the number of plays per video.
  • Max file size (MB) – upload limit, 50 MB by default.
  • Allowed extensionsmp4,webm,ogg by default.
  • Play icon colour and background – customise the play button.

Adding a video to a product

  1. Open a product page in the back office.
  2. Go to the Videos tab added by the module.
  3. Choose the source: file to upload, YouTube link or Vimeo link.
  4. If needed, set a poster (cover image) and a title / description per language.
  5. Adjust the playback options (autoplay, muted, loop, controls) if they differ from the defaults.
  6. Save. The video appears in the product gallery.

Videos can be reordered by drag and drop, enabled or disabled, and one of them can be designated as the cover video (only one per product and per store).

Automatic posters

If no poster is provided, the module automatically generates a preview image: the YouTube thumbnail (hqdefault) for YouTube videos, and the Vimeo thumbnail for Vimeo videos. For uploaded files, providing a poster manually is recommended.

Front-office display

Videos are inserted into the thumbnail gallery of the product page, right after the images. On click, the video plays in place or opens in a lightbox depending on the configuration. Uploaded videos use the native HTML5 player; YouTube and Vimeo are embedded via their official player with the parameters matching the chosen options (autoplay, muted, loop, controls).

Analytics

When the Analytics option is enabled, each play increments a counter (play_count) stored in the database. This makes it possible to measure video engagement per product.

Uninstallation

Uninstalling removes the module’s tables and its settings. The video files and posters associated with products are also cleaned up.

Technical details

  • Tables: dfproductvideo (videos and options) and dfproductvideo_lang (translated title / description).
  • Hooks used: displayAdminProductsExtra, displayAfterProductThumbs, actionFrontControllerSetMedia, actionProductUpdate, actionProductDelete, displayBackOfficeHeader.
  • Videos managed via an AJAX controller (save, delete, reorder, enable).
  • Play tracking via a dedicated front controller.
Was this page helpful?

Still stuck? Contact support