Adobe Summit is here.

Experience keynotes, Sneaks, sessions, and more — all on demand.

Watch now
DocumentationCommerceTools

ACSD-62758: Resolved video rendering issue on configurable product pages

Last update: January 20, 2025
  • Topics:
  • Catalog Management

CREATED FOR:

  • Experienced
  • Admin
  • Developer

The ACSD-62758 patch fixes the issue where product videos on configurable product detail pages do not render correctly when URLs contain pre-selected swatch options. This patch is available when the Quality Patches Tool (QPT) 1.1.57 is installed. The patch ID is ACSD-62758. Please note that the issue is scheduled to be fixed in Adobe Commerce 2.4.8.

Affected products and versions

The patch is created for Adobe Commerce version:

  • Adobe Commerce (all deployment methods) 2.4.6

Compatible with Adobe Commerce versions:

  • Adobe Commerce (all deployment methods) 2.4.4 - 2.4.7-p3
NOTE
The patch might become applicable to other versions with new Quality Patches Tool releases. To check if the patch is compatible with your Adobe Commerce version, update the magento/quality-patches package to the latest version and check the compatibility on the Quality Patches Tool: Search for patches page. Use the patch ID as a search keyword to locate the patch.

Issue

Product videos do not render correctly on configurable product detail pages when the URL includes pre-selected swatch options, resulting in the display of a static image instead of the video.

Steps to reproduce:

  1. Navigate to Stores > Attributes > Product.

  2. Select the Color attribute and edit it.

  3. Update the following settings:

    1. Set Catalog Input Type for Store Owner to Visual Swatch.
    2. Set Update Product Preview Image to Yes.

  4. Create a few options for this attribute.

  5. Create a new category and add a new configurable product to it, using the Color attribute.

  6. Add a single random image to the parent product.

  7. Edit the newly created configurable child products and add a video to their media gallery:

    1. Click Add Video and use the test video URL: https://vimeo.com/12860646.

  8. Save the product, clear the cache, and re-index the store.

  9. Open the newly created product in the storefront, select one of the swatch options, and confirm that the video loads correctly with the player button displayed.

  10. The video should load as expected, and the player button should appear.

  11. Now, right-click one of the swatch options, select Inspect, and locate the attribute id and option id. Copy the product URL and append the following to the end of it: www.product-url.com/producit-test#attribute_id=option_id. This will pre-select the swatch option. Open the updated URL in a new window.

Expected results:

The video should load correctly, similar to when a swatch option is manually selected.

Actual results:

A static image is displayed instead of the video. Console errors are logged, indicating a failure in video initialization.

Apply the patch

To apply individual patches, use the following links depending on your deployment method:

  • Adobe Commerce or Magento Open Source on-premises: Quality Patches Tool > Usage in the Quality Patches Tool guide.
  • Adobe Commerce on cloud infrastructure: Upgrades and Patches > Apply Patches in the Commerce on Cloud Infrastructure guide.

Related reading

To learn more about Quality Patches Tool, refer to:

  • Quality Patches Tool: A self-service tool for quality patches in the Tools guide.
recommendation-more-help
c2d96e17-5179-455c-ad3a-e1697bb4e8c3