Solved

Shopify autoplay video with unmute button

Digital_Imran
Shopify Partner
154 2 19

 

I just need a video section with autoplay video and unmute button. Here is the good example : Schoolzone.com 


How can I add this type of video section to the top of the website: Schoolzone.com. I'm quite good at coding, so you can provide me with codes.  As far as I know, it isn't a Shopify website, and you can create sections using codes. 
Thank you in advance. I appreciate your help 🙂



Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Accepted Solution (1)

DigiDecoded
Shopify Partner
145 18 17

This is an accepted solution.

Hello @Digital_Imran ,

try to paste one.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

<!-- /path/filename: example.html -->
<div class="video-container">
    <video class="img-fluid w-100" autoplay loop playsinline muted crossorigin="anonymous" id="bgVideo">
        <source src="https://cdn.shopify.com/videos/c/vp/db0c1c9f50c242b5b077ce7a90cdf8ea/db0c1c9f50c242b5b077ce7a90cdf8ea.HD-720p-1.6Mbps-14004302.mp4">
        <track label="English" kind="captions" srclang="en" src="https://cdn.shopify.com/s/files/1/0549/1854/5574/files/School_Zone_60_sec_Brand.vtt?v=1681761453"></track>
    </video>
    <button id="muteButton">Unmute</button>
</div>

 

 .video-container {
    position: relative;
}

#muteButton {
    position: absolute;
    right: 20px;
    top: 20px;
    /* Additional styling*/
}

 

 document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('bgVideo');
    var muteButton = document.getElementById('muteButton');

    muteButton.addEventListener('click', function() {
        if (video.muted) {
            video.muted = false;
            muteButton.textContent = 'Mute';
        } else {
            video.muted = true;
            muteButton.textContent = 'Unmute';
        }
    });
});
Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp | Website

View solution in original post

Replies 3 (3)

DigiDecoded
Shopify Partner
145 18 17

This is an accepted solution.

Hello @Digital_Imran ,

try to paste one.

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

<!-- /path/filename: example.html -->
<div class="video-container">
    <video class="img-fluid w-100" autoplay loop playsinline muted crossorigin="anonymous" id="bgVideo">
        <source src="https://cdn.shopify.com/videos/c/vp/db0c1c9f50c242b5b077ce7a90cdf8ea/db0c1c9f50c242b5b077ce7a90cdf8ea.HD-720p-1.6Mbps-14004302.mp4">
        <track label="English" kind="captions" srclang="en" src="https://cdn.shopify.com/s/files/1/0549/1854/5574/files/School_Zone_60_sec_Brand.vtt?v=1681761453"></track>
    </video>
    <button id="muteButton">Unmute</button>
</div>

 

 .video-container {
    position: relative;
}

#muteButton {
    position: absolute;
    right: 20px;
    top: 20px;
    /* Additional styling*/
}

 

 document.addEventListener('DOMContentLoaded', function() {
    var video = document.getElementById('bgVideo');
    var muteButton = document.getElementById('muteButton');

    muteButton.addEventListener('click', function() {
        if (video.muted) {
            video.muted = false;
            muteButton.textContent = 'Mute';
        } else {
            video.muted = true;
            muteButton.textContent = 'Unmute';
        }
    });
});
Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp | Website
Digital_Imran
Shopify Partner
154 2 19

Thank you for the solution @DigiDecoded  😄 . It works. 

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
RanjitSingh3
New Member
6 0 0

Hi DigiDecoded,

 

I want to achieve the same on my homepage. Can you help me how to use these codes. I'm a new to this. Please help.