How can I add an auto-play video banner to the Sense theme?

Ben_Neorai_Gate
Explorer
53 1 6

Hey,

 

How can I add a video banner or a video in the background (that will play and run automatically) in my store?

 

I'm running the Sense theme. This is my store: https://asade.co.il

 

Thanks guys

Replies 4 (4)

EBOOST
Shopify Partner
1006 269 308

Hi @Ben_Neorai_Gate 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_0-1675652593418.png

 

2. Layout/theme.liquid
3. Add code below to bottom of file and before </body> tag

EBOOST_1-1675652672484.png

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
    	$(document).ready(function(){
    		if($('button.deferred-media__poster').length > 0){
    			$("button.deferred-media__poster").click();
    			$(".product__media-item video").on("loadeddata", function() {
    			  	var video =  $(".product__media-item video").get(0);
    				video.play();
    			});
    		}
    	});
    </script>
    <style>
     .featured-product .global-media-settings:after {
     	display: none;
     }
    
    @media screen and (max-width: 749px){
    	.featured-product .product__modal-opener.product__modal-opener--video {
    		display: none!important;
    	}
    	.featured-product .deferred-media {
    		display: block!important;
    		width: 100%;
    	}
    }
    
    </style>

 4. sections/video.liquid

5. Add code like the screenshot below

5.1 Youtube add param "&autoplay=1"

5.2 Vimeo add params "?autoplay=1&loop=1&autopause=0"

ecstyletheme-·-Edit-Sense-·-Shopify.png

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
Ben_Neorai_Gate
Explorer
53 1 6

Thank you, but it is not working

tapita
Shopify Partner
19 0 1

Hi!

Are these type of video backgrounds what you want to achieve?: https://pwacart.com/pages/background

You can add a video background like these easily using Tapita Page Builder.

1. Click Add Section > Pre-made sections > Background

tapita_0-1675654353703.png

2. Then, select a Video Background that suits your need and enter your video information

tapita_1-1675654458221.png

 

The video background is autoplay by default.

 

If our answer is helpful, please give us a Like or mark it as a Solution.

Marianna_YTTG
Shopify Partner
7 0 0

Check out this post