Documentation

AEMaaCS: Mobile devices show two play buttons in Dynamic Media videos

Last update: Wed Oct 22 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Dynamic Media videos in Adobe Experience Manager (AEM) as a Cloud Service show two overlapping play buttons when viewed on mobile devices. To fix this, update Viewer Preset settings, inspect initialization scripts, and ensure consistency across environments.

Description description

Environment

  • Product: Adobe Experience Manager (AEM) as a Cloud Service – Sites
  • Feature: Dynamic Media Viewer Presets
  • Instance: Production
  • Platform: Observed on physical mobile devices (for example, iPhones)

Issue/Symptoms

  • Dynamic Media videos display two overlapping play buttons when viewed on mobile devices.
  • This issue doesn’t occur in desktop browsers, simulated mobile environments, or staging environments.
  • The duplicate play buttons are rendered with different top property values in the DOM.

Resolution resolution

Follow these steps to eliminate duplicate play buttons in mobile environments:

  1. Modify the Viewer Preset configuration to disable custom overlay play buttons so only the browser’s native play button appears.

    1. Go to Assets > Viewer Presets in AEM.
    2. Edit the relevant Viewer Preset.
    3. Disable any options related to custom overlay controls for mobile devices.

  2. Check if the video player initialization script runs multiple times, which can create duplicate DOM elements.

    1. Use browser developer tools to monitor calls to s7viewers.VideoViewer or similar functions.
    2. Add diagnostic logging to track when and how often these scripts are triggered

  3. Make sure CSS and JavaScript files tied to the Viewer Preset are consistent across environments.

    1. Compare loaded assets using browser network tools.
    2. Verify that no extra scripts or styles modify .s7iconeffect or related classes.

  4. If the issue affects only specific users, clear the browser cache or test in incognito/private mode.

  5. Republish both the affected video assets and updated Viewer Presets to replace cached versions.

  6. Note: This is an optional step.

    You can apply conditional CSS rules for mobile devices to suppress custom overlays. Use:

    code language-none 
    @media (max-width: 767px) {
                .s7playbutton {
                    display: none !important;
                }
            }

  7. Validate changes in a lower environment before deploying to production.

    1. Test on physical devices instead of simulators/emulators.
    2. Refresh pages multiple times to confirm consistent behavior.

Video in Dynamic Media in AEMaaCS User Guide

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f