How to create an autoplay video with an unmute button

[YIVAN]

Hello,

I am trying to create a autoplay video for my homepage that has an unmute button as well. Is there any way I could do this.

Here is an example of what I want: https://rh-ude.com/

URL: https://www.yivan.us/

Pass: YIVAN24

Thanks in advance

[BSSCommerce-HDL · Accepted solution]

Hi @YIVAN,  

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save 

.custom-btn-muted {
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
}

Step 4: Find theme.liquid. Before close body tags. Pls insert this code: 

<script>
      let video = document.querySelector("#video");
      if(video) {
         video.parentNode.insertAdjacentHTML('beforeend', '<div class="custom-btn-muted">Unmuted</div>');
         video.parentNode.style.position = "relative"
         let btnCustomMuted = document.querySelector(".custom-btn-muted");
         btnCustomMuted.addEventListener("click", () => {
           if(video.muted) {
             btnCustomMuted.textContent = "Muted";
           }
           else {
             btnCustomMuted.textContent = "Unmuted";
           }
            video.muted = !video.muted;
         })
      }
    </script>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @YIVAN, Pls replace this code at file theme.liquid to new code: 

<script>
      let video = document.querySelector("#video");
      if(video) {
         video.parentNode.insertAdjacentHTML('beforeend', '<div class="custom-btn-muted">Unmute</div>');
         video.parentNode.style.position = "relative"
         let btnCustomMuted = document.querySelector(".custom-btn-muted");
         btnCustomMuted.addEventListener("click", () => {
           if(video.muted) {
             btnCustomMuted.textContent = "Mute";
           }
           else {
             btnCustomMuted.textContent = "Unmute";
           }
            video.muted = !video.muted;
         })
      }
    </script>

Here is result: 

Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @YIVAN,  

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save 

.custom-btn-muted {
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
}

Step 4: Find theme.liquid. Before close body tags. Pls insert this code: 

<script>
      let video = document.querySelector("#video");
      if(video) {
         video.parentNode.insertAdjacentHTML('beforeend', '<div class="custom-btn-muted">Unmuted</div>');
         video.parentNode.style.position = "relative"
         let btnCustomMuted = document.querySelector(".custom-btn-muted");
         btnCustomMuted.addEventListener("click", () => {
           if(video.muted) {
             btnCustomMuted.textContent = "Muted";
           }
           else {
             btnCustomMuted.textContent = "Unmuted";
           }
            video.muted = !video.muted;
         })
      }
    </script>

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[YIVAN]

Thank you very much, I have a couple questions. Can the text be Unmute and Mute rather than unmuted and muted? Also do you know how to do the mobile version as well?

[BSSCommerce-HDL · Accepted solution]

Hi @YIVAN, Pls replace this code at file theme.liquid to new code: 

<script>
      let video = document.querySelector("#video");
      if(video) {
         video.parentNode.insertAdjacentHTML('beforeend', '<div class="custom-btn-muted">Unmute</div>');
         video.parentNode.style.position = "relative"
         let btnCustomMuted = document.querySelector(".custom-btn-muted");
         btnCustomMuted.addEventListener("click", () => {
           if(video.muted) {
             btnCustomMuted.textContent = "Mute";
           }
           else {
             btnCustomMuted.textContent = "Unmute";
           }
            video.muted = !video.muted;
         })
      }
    </script>

Here is result: 

Hope this can help you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @YIVAN, Regarding the issue of the mobile version being displayed incorrectly. Please follow these instructions:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside it

.custom-btn-muted {
    position: absolute;
    bottom: 15px;
    right: 20px;
    color: white;
    text-transform: uppercase;
    cursor: pointer;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍