Shopify autoplay video with unmute button

[Digital_Imran]

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 🙂

[DigiDecoded · 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';
        }
    });
});

[Digital_Imran]

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

[RanjitSingh3]

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.