Disable Video UI During Playback on Product Page (Prestige Theme)

[Mcfly69290]

Hi everyone,

I'm using the Prestige theme and would like to simplify the video interface on my product page.

Specifically, I want to hide the video controls during playback, keeping only the progress bar visible. The full video UI should reappear at the end of the video.

Here’s an example of a product page where I’d like to apply this: https://www.futur-casa.com/products/cintre-gain-de-place

Here's actually how its look like (mobile)

 

Does anyone know how to achieve this? Any help would be greatly appreciated!

Thanks in advance!

[mageplaza-cs]

Hi @Mcfly69290 

I am from Mageplaza - Shopify solution expert.

Please follow these steps to resolve this customization:

1. Go to Online Store > Themes.
2. Click Actions > Edit Code.
3. Find theme.css
4. Add this at the end:

.product-gallery video {
    pointer-events: none;
}
.product-gallery video::-webkit-media-controls-play-button,
.product-gallery video::-webkit-media-controls-volume-slider,
.product-gallery video::-webkit-media-controls-mute-button,
.product-gallery video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

 5. Save your changes and check your store.

Please let me know if it works as expected!

Best regards

[Mcfly69290]

Hello, thanks for your answer.

I've tested and it didn't change anything.

[mageplaza-cs]

Hi @Mcfly69290 

You can try the following: Place this JavaScript code in your Prestige theme's theme.liquid file (inside <script> tags) or in a separate JavaScript file.

document.addEventListener("DOMContentLoaded", function () {
    const video = document.querySelector("video");

    if (video) {
        video.addEventListener("play", function () {
            video.controls = false;
        });

        video.addEventListener("ended", function () {
            video.controls = true;
        });

        video.addEventListener("timeupdate", function () {
            if (!video.paused && !video.ended) {
                video.controls = false;
            }
        });
    }
});

Save your changes and check your store.

Please let me know if it works as expected!

Best regards

[Mcfly69290]

Hello it didn't work as well.

Would you like collab code so you can see inside my store ?

[mageplaza-cs]

@Mcfly69290 

Yes, you can send it to me via email so I can check it in the most accurate way. Thanks!