How to create an autoplay video with an unmute button

Solved

How to create an autoplay video with an unmute button

YIVAN
Explorer
51 1 16

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

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an accepted solution.

Hi @YIVAN,  

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

BSSCommerceHDL_0-1718433016018.png

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

BSSCommerceHDL_1-1718433034808.png

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: 

BSSCommerceHDL_3-1718433230978.png

<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:

BSSCommerceHDL_4-1718433297608.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an 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: 

BSSCommerceHDL_0-1718435356540.png

Hope this can help you 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an 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

BSSCommerceHDL_1-1718435647308.png

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

Here is result: 

BSSCommerceHDL_2-1718435688306.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an accepted solution.

Hi @YIVAN,  

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

BSSCommerceHDL_0-1718433016018.png

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

BSSCommerceHDL_1-1718433034808.png

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: 

BSSCommerceHDL_3-1718433230978.png

<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:

BSSCommerceHDL_4-1718433297608.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
YIVAN
Explorer
51 1 16

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?

Screen Shot 2024-06-15 at 1.53.47 AM.png

BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an 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: 

BSSCommerceHDL_0-1718435356540.png

Hope this can help you 😍

 

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-HDL
Shopify Partner
1142 394 460

This is an 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

BSSCommerceHDL_1-1718435647308.png

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

Here is result: 

BSSCommerceHDL_2-1718435688306.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency