Make Videos Autoplay for Product Page

Deutsch Diskussion Shopify Design
,
1

Hi there,

I added a video in between my existing product pictures and I would like to make it autoplay without clicking on it. It already works for desktop, but not on MOBILE yet. Using Dawn Theme.

You see an example here but I would like to make this work on autoplay for all other products too:

https://taneraskin.com/products/soft-scalp-brush-kopfhautmassageburste

Best,

Isabelle

2

Hey Isabelle!

Do you speak German…cause this is the German-speaking community.

image.png

Anyhow, to make the video autoplay on mobile for the Dawn theme, some HTML modification and possibly custom JavaScript to ensure mobile compatibility will have to do, like removing the controls attribute, which might not be needed for autoplay functionality but helps if you don’t want visible controls interfering. Then add the muted attribute because Autoplay won’t work on most mobile browsers unless the video is muted due to browser policies. Ensure playsinline is set to allow autoplay:

Include the following JavaScript code in your theme’s theme.liquid file inside the or tags:

document.addEventListener("DOMContentLoaded", function () {
    const videos = document.querySelectorAll("video[autoplay]");
    videos.forEach((video) => {
        // Check if the video is already playing (important for compatibility)
        if (video.paused && video.muted && !video.controls) {
            video.play().catch((err) => {
                console.error("Video autoplay failed:", err);
            });
        }
    });
});

  • HTML Attributes:

    • playsinline: Ensures the video plays inline rather than going fullscreen on mobile.
    • autoplay: Starts the video automatically.
    • loop: Restarts the video when it ends.
    • muted: Required for autoplay to work on most mobile browsers.
3

Hallo Ben,

vielen Dank für die Code Snippets, aber leider funktioniert es nicht. Wenn ich den zweiten Code in head oder body in theme.liquid einfüge, erscheint er als Text auf meiner Website.

Und wo genau soll ich den ersten Teil einfügen?

Danke für Deine Hilfe.

Viele Grüße,

Isabelle

4

So wie es aussieht was du beschreibst hast du den JavaScript-Code nicht innerhalb von -Tags eingefügt, entweder im - oder vor dem schließenden -Tag:

Oder:

Und wohin mit dem ersten HTML-Code (das -Element) - direkt in die Template-Datei, die für das Laden deiner Produkte oder Medien zuständig ist wie snippets/product-media.liquid. Füge das -Element dort ein, wo das Video angezeigt werden soll.

Du kannst auch nach den Video code im theme code suchen und entferne unnötige Attribute wie controls (falls keine Steuerung gewünscht ist). Überprüfe, ob autoplay, muted, und playsinline korrekt gesetzt sind. Hier ist der Code aus deiner PDP im obigen Link:

image.png
image.png1553×1051 326 KB