Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

Re: Adding a video banner to Sense theme

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 3 (3)

EBOOST
Shopify Partner
1404 352 433

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. Github.com/eboost10
- ❤❤DONATE ❤❤Coffee tips
Ben_Neorai_Gate
Explorer
53 1 6

Thank you, but it is not working

Marianna_YTTG
Shopify Partner
56 0 4

Check out this post