AMP Videos
Displays product videos on Accelerated Mobile Pages (AMP) using the correct AMP-compatible video components so your videos appear on fast-loading mobile pages.
Available since v3.0.0
Overview
AMP pages use a restricted subset of HTML — standard <iframe> and <video> tags are not allowed. This feature outputs the correct AMP components (<amp-youtube>, <amp-vimeo>) and injects the required script headers so videos work on AMP product pages without triggering AMP validation errors.
Because AMP is provided by a separate module or theme — not by PrestaShop itself — this feature works through three hooks that your AMP theme or module must call in its templates. Once those hooks are in place and AMP Videos is enabled, your store's product videos appear in the image carousel and in the product content area on every AMP product page.
The module also includes a one-time header scan that checks whether the required AMP component scripts are already present in your AMP template, preventing duplicate script errors on pages that already load those scripts themselves.
Configuration
- Go to Modules > Module Manager, find Product Video, and click Configure.
- Navigate to the AMP Integration tab.
- Enable Use AMP Videos and adjust the options below.
- Click Save.
- After saving, enable Review AMP Headers (once) and save again — this lets the module detect which AMP script tags it needs to output.
| Setting | Values | Default | Description |
|---|---|---|---|
| Use AMP Videos | Yes / No | No | Master switch. Must be enabled for any AMP video output to occur. |
| Autoplay videos in Carousel | Yes / No | Yes | Tries to autoplay videos in the AMP carousel. Videos start muted; sound activates only when the customer taps the video. Autoplay may be blocked on some devices regardless of this setting. |
| Display Controls in videos | Yes / No | No | Shows native playback controls (play, pause, timeline) on AMP video components. |
| Review AMP Headers (once) | Yes / No | — | Enable once to trigger a scan of the AMP page's <head> for missing video component scripts. The module saves the result and resets this switch to No automatically. Re-enable if you change your AMP theme. |
| Missing Headers found | Read-only | — | Shows which AMP component scripts are missing from your AMP template, or "All the required headers are already present" if nothing is missing. |
After switching themes or updating your AMP module, re-enable Review AMP Headers (once) and save. The previous scan result may no longer be accurate.
Required Hook Placement
You or your AMP theme/module developer must add three hooks to the AMP product page template. These hooks are not called automatically — they must be placed in the template source.
1. Inside <head>
{hook h='displayAMPAdditionalHeaders'}
Outputs the <script async custom-element="..."> tags required by AMP for video components. Place this anywhere inside the <head> tag of your AMP product template. If the Review AMP Headers scan found that the scripts are already present, this hook outputs nothing to avoid duplication.
2. Inside the image carousel
{hook h='displayAMPVideosCarousel'}
Outputs one AMP video component per product video, sized to match your product image dimensions. Place this inside the <amp-carousel> block alongside your <amp-img> slides.
This hook only outputs videos when the Image Gallery display location is enabled in the main Video Display settings (
PV_DISPLAY_IMG). If you use only the side panel or content area display modes, usedisplayAMPVideosContentinstead.
3. In the product content area
{hook h='displayAMPVideosContent'}
Outputs a standalone AMP video player using the width and height you configured in Video Dimensions. Place this in the product template wherever you want the video to appear — for example, before or after the long description.
This hook only outputs videos when either the Side Panel or Content/Tabs display location is enabled in the main Video Display settings.
How It Works
When Use AMP Videos is enabled and a customer visits a product's AMP page:
displayAMPAdditionalHeadersfires in the<head>. If the Review AMP Headers scan found missing scripts, the module outputs the appropriate<script>tags. If the scan found all scripts already present, this hook outputs nothing.displayAMPVideosCarouselfires inside the<amp-carousel>and outputs one AMP video slide per video assigned to the product. Videos are sized to match the product image type configured in your gallery settings.displayAMPVideosContentfires in the content area and outputs a standalone player using the video width and height from your Video Dimensions configuration.
The module uses <amp-youtube> for YouTube videos and <amp-vimeo> for Vimeo videos, extracting the video ID from the stored URL. Autoplay and controls are applied to carousel videos according to your settings.
What "Review AMP Headers" does
When you enable this switch and save, the module fetches your AMP product page, parses the <head> section, and checks which AMP component scripts (amp-youtube, amp-vimeo, etc.) are already loaded by your theme. It saves the list of missing scripts to its configuration. From that point on, displayAMPAdditionalHeaders outputs only the missing scripts — not all of them — preventing duplication. The switch resets to No automatically after the scan completes.
Usage Examples
Example: Videos in the image carousel
You have a product with two YouTube videos and your AMP module uses an <amp-carousel> for the product images. You add {hook h='displayAMPVideosCarousel'} inside the <amp-carousel> tag, enable Use AMP Videos, and run the headers scan. When a customer visits the AMP product page, the two videos appear as additional slides in the carousel alongside the product photos. With Autoplay enabled, the first video slide begins playing muted when it comes into view.
Example: Video below the product description
Your AMP theme places the product description in a <div class="description"> block. You add {hook h='displayAMPVideosContent'} immediately after that block and enable the Content/Tabs display location in the main Video Display settings. The product's Vimeo video now appears below the description on every AMP product page, sized according to your Video Dimensions settings.
Example: Preventing AMP validation errors
After enabling AMP Videos you see AMP validation errors about missing amp-youtube scripts. You open the AMP Integration settings, enable Review AMP Headers (once), and save. The module scans the page, detects the missing script, and from that point on outputs it automatically via displayAMPAdditionalHeaders. The validation errors disappear.
Important Notes
- AMP is not included in PrestaShop by default. This feature only works if your store has a separate AMP module or theme that generates AMP product pages and calls the three hooks described above.
- Only YouTube and Vimeo are supported in AMP mode. HTML5 videos and custom provider videos cannot be rendered as AMP components and will not appear on AMP pages.
- The carousel hook requires Image Gallery display to be enabled. If you use a display mode other than Image Gallery, use
displayAMPVideosContentfor the content area instead. - Autoplay behavior is device-dependent. The AMP specification allows autoplay on some implementations, but mobile browsers and AMP caches may override it regardless of your setting.
- Run the headers scan once after initial setup, and again after any AMP theme change. Without a scan result, the module cannot know whether to output the AMP scripts itself, and you risk either missing scripts or duplicates.
- Multi-shop: The AMP Videos settings are per-shop. Each shop context can independently enable or disable AMP Videos and configure its autoplay and controls options.
Troubleshooting
| Problem | Solution |
|---|---|
| No videos appear on AMP product pages | Confirm Use AMP Videos is enabled. Verify that all three hooks are placed in your AMP template. Check that the product has at least one YouTube or Vimeo video assigned. |
| Carousel hook shows nothing | Check that Image Gallery display location is enabled in the main Video Display settings. The displayAMPVideosCarousel hook only fires when that location is active. |
| Content hook shows nothing | Check that either Side Panel or Content/Tabs display location is enabled in the main Video Display settings. |
| AMP validation error: missing required script | Enable Review AMP Headers (once) and save. The module will detect and remember the missing script, then output it on subsequent page loads via displayAMPAdditionalHeaders. |
| Duplicate AMP script errors | Run Review AMP Headers scan — after the scan, the module detects the scripts are already present and stops outputting them. Clear the PrestaShop cache after saving. |
| "Missing Headers found" still shows a script after fixing your theme | Re-enable Review AMP Headers (once) and save to force a fresh scan. The old scan result is stale. |
Frequently Asked Questions
Do I need to change my AMP module or theme to use this feature?
Yes. Your AMP theme or module must call the three hooks (`displayAMPAdditionalHeaders`, `displayAMPVideosCarousel`, `displayAMPVideosContent`) in its product page templates. Without those hook calls, the module has no way to inject content into the AMP page. Share the hook names with your theme developer if you need help placing them.
Will HTML5 or custom provider videos appear on my AMP pages?
No. AMP only supports a specific set of approved components, and there is no AMP component for generic HTML5 video or custom domains. Only YouTube (`<amp-youtube>`) and Vimeo (`<amp-vimeo>`) videos are output on AMP pages.
Do I need to run the "Review AMP Headers" scan every time I save settings?
No — run it once after initial setup, and again only if you change your AMP theme or update your AMP module. The scan result is stored and reused on every subsequent page load until you force a new scan.
Why does autoplay not work even though I have it enabled?
Mobile browsers and AMP caches (such as Google's AMP Cache) are permitted by the AMP specification to block autoplay at their discretion. This is a browser and platform restriction, not a module limitation. Videos will still play normally when the customer taps them.
The "Missing Headers found" field shows "All the required headers are already present" — does that mean I don't need the `displayAMPAdditionalHeaders` hook?
You can leave the hook in place — it simply outputs nothing when all scripts are already present. Removing it is safe but unnecessary. Keeping it ensures the module can output missing scripts automatically if your theme ever changes.