Dawn Theme remove Modal and show Video in mobile product gallery

[DenisPereira]

Hello everyone,

I’m facing an issue with product videos on mobile and would appreciate some help in resolving it.

Recently, I made some changes to enable autoplay for the product videos, but this only works when the video is in the first position of the media gallery, as shown in the link below:

Camisola Malha Lucky – Maballa

The problem occurs when the video is not in the first position but in the second or subsequent ones. In this case, a static image with a play button appears, and when clicked, it opens a blank modal.

Camisola Malha Amour – Maballa

What I would like is for the video to play directly as I scroll through the images, just like it does when it’s in the first position, without showing a static image or opening a modal when clicked.

On desktop, the video displays correctly, but on mobile, I’d like to disable the modal and have the video show directly in the gallery, just as it does on desktop.

Thank you for your help!

The Problem Mobile - Second or other position

Desktop is OK! with autoplay

Mobile in first position

[suyash1]

@DenisPereira  please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

@media screen and (max-width: 749px) {
.product__media-list .deferred-media {display: block;}
.product__media-list video{height: 450px; object-fit: cover;}
}

[DenisPereira]

Hello @suyash1 thank you for your reply i have already tried but dind't work.

With the code below, the modal changes to video and starts playing automatically, regardless of the video’s position in the gallery (e.g., 3rd or 5th).

The problem is that when the product page opens, it jumps to the video’s position in the gallery, preventing you from seeing other images.

Additionally, if there are no videos in the product gallery, the entire gallery section disappears, leaving only product details.

What I need is simple: when scrolling through the gallery, the video should autoplay, while allowing smooth navigation to previous or next images.

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