OpenCart product video module for Journal3: YouTube, Vimeo, MP4

VS Product Video is an OpenCart product video module for stores running OpenCart 3.0.3.x with the Journal3 theme. It shows the YouTube, Vimeo and MP4 videos found in a product description as a row of thumbnails right under the product title, above the price and the Add to cart button, and plays them in a popup on click. It is for Journal3 store owners who want video on product pages without a hosted widget service and without rewriting their descriptions.

The module is one of four OpenCart extensions SPARCLEY has just published on the OpenCart Marketplace, alongside our DPD tracking, supplier import and XML feed modules. Earlier versions have been running on a live OpenCart 3 store with Journal3 and PHP 7.4; version 1.3.0 is the public edition.

• SPARCLEY DPD Tracking & Notifications Pro for OpenCart
• Supplier Import – product import and stock sync for OpenCart

A common way to add product video is a hosted third-party widget: an external script on every product page, a separate account and, often, a recurring fee. VS Product Video takes a lighter route. Your videos stay where they already are – in the product descriptions – and the module only changes how Journal3 displays them.

• No extra database tables: the videos stay in the product descriptions, and the module keeps only an on/off setting and its admin menu item.
• Existing descriptions need no changes: YouTube and Vimeo iframes, links, plain-text URLs and old YouTube object or embed code are recognised as they are.
• The description in the database is never rewritten for display. Videos shown in the box, and a short label such as Video: before them, are only hidden from the visible description and the Journal3 description tab.
• Setting Status to Disabled, or uninstalling, switches the box off at once: descriptions are shown exactly as stored and uploaded files stay on the server.

Videos appear in a Product videos box right under the product title, above the price and the Add to cart button – on the product page and in the Journal3 quickview. Each video gets a 192×108 px thumbnail with a play icon and its title. When the thumbnails do not fit in one row, arrows and dots appear on desktop, and shoppers can swipe on phones.

A click opens the player in a popup. With two or more videos it adds previous and next buttons, a counter and, on larger screens, a thumbnail strip. Esc, the close button, a click outside or the phone's Back button closes it, and keyboard focus stays inside the popup.

The box shows up to 12 videos per product and per language, and every language has its own videos in its own description. Box texts are in English by default and switch to Lithuanian for language codes starting with lt.

Titles come from the link text. Without it, the YouTube or Vimeo title is fetched through oEmbed (this needs cURL) and cached for 30 days, with at most 6 new lookups per page view. When cURL is available, private, deleted and non-embeddable videos are left out of the box automatically.

These link formats are recognised in the description of the current language:

• YouTube: watch, youtu.be, embed, shorts and live links, plus youtube-nocookie.com and the www. and m. addresses.
• Vimeo: standard, unlisted, channel and group links, /video/ links and player.vimeo.com.
• Video files: links to MP4, WebM, M4V and MOV files over http or https. H.264 is recommended, because MOV and M4V play only where the visitor's browser supports the codec.
• Not supported: YouTube playlists, channel pages and handle links, and Vimeo showcases and albums.

No embedded players sit in the page until a shopper asks for one. The player and its cookies load only after a click: YouTube plays from youtube-nocookie.com in the visitor's language, Vimeo runs with Do Not Track, and uploaded files use the browser's HTML5 player.

Before the click, the page loads only the thumbnails – from the YouTube and Vimeo image servers for hosted videos. Title lookups run on the server with a 2-second time limit and are cached (30 days, or 1 day for a failed lookup), so a product page does not ask the video platforms for the same data on every visit.

There are two ways to work. In the product form, a panel under each language's description lists the videos as the store will show them – with a note when a video will not be shown – and lets you add a YouTube, Vimeo or file link with an optional title, upload a file or remove a video. Changes are saved with the product form's own Save button.

The Catalog → Product videos page does the same without opening the product form. Find a product by name, model, SKU or ID, add a link or upload a file for one language or for all, or remove a video; changes are written at once. A list of all products with videos can be filtered by text, video type and product status, sorted and paged, and a History tab keeps the last 200 add, upload and remove actions made on that page, with date, user, product and language.

• Uploads: MP4, M4V, MOV and WebM files up to 1 GB, sent in chunks of up to 5 MB with a progress bar, so files larger than the PHP upload limit still go through.
• Thumbnails for uploads: when the browser can decode the file, a frame of the video becomes the thumbnail.
• Safe saving: a change on the Product videos page is refused if the description was edited elsewhere in the meantime, and you are asked before adding a 13th video.
• Settings tab: Status, the installed version and an installation check of the video library, product form panel, upload folders, menu item and the default store's theme.
• Permissions and languages: on install, user groups that can modify products get access to the module, and English and Lithuanian admin language files are included.

You need OpenCart 3.0.3.x with Journal3 3.0.x as the store theme, and PHP 7.4 or newer (PHP 7.2 and 7.3 are not supported; PHP 8.3 is covered by the automated test suite but not yet by a live store). cURL is optional but recommended for titles, Vimeo thumbnails and hiding unavailable videos, and fileinfo is used for the MIME check of uploads. Uploads need writable image and storage folders, free disk space of about twice the file size plus 512 MB, and a web server that accepts requests of about 5 MB.

A few limits are worth knowing before you buy. The module changes the Journal3 product page through OCMOD, so without Journal3 OpenCart skips the whole modification, and in a multi-store setup the box appears only in stores whose theme is Journal3. The product form panel needs the standard Summernote editor; with another editor only the panel is left out. On nginx, the protection rules for the upload folders have to be added to the server configuration. OpenCart and Journal3 versions other than 3.0.3.3 and 3.0.52 have not been tested yet.

Installation takes five steps:

• Extensions → Installer: upload the module's .ocmod.zip package.
• Extensions → Modifications: click Refresh.
• Extensions → Extensions → Modules: install VS Product Video, which also enables it.
• Catalog → Product videos → Settings: every row of the installation check should say OK.
• If the store still shows the old product page, refresh the theme cache and clear the Journal3 cache.

• VS Product Video on the OpenCart Marketplace

The full listing, documentation and compatibility details are on the OpenCart Marketplace, and questions and bug reports are welcome in the comments on the extension's page – please include your OpenCart, Journal3 and PHP versions.

If you would rather have it handled for you, SPARCLEY can install and check the module on your Journal3 store as part of our OpenCart development and maintenance work. The same batch of releases also includes a Universal XML Feed Generator for product feeds.

• Talk to us about your OpenCart store
• Web development services
• Complete digital care
• Universal XML Feed Generator for OpenCart