Dawn theme custom liquid video - different sizes on mobile and desktop

Dawn theme custom liquid video - different sizes on mobile and desktop

Allunix
Tourist
9 0 0

Hello,

Recently, we uploaded a video to the homepage of our website.
A few days ago, we came across this brand's webpage. I wanted to change the custom liquid code, but none of the codes that I found worked.
So I would be grateful for a solution on how to make the video size on mobile like on the brand from the screenshot.
Here is the custom liquid code that I currently have:
<style>
video {
display: block;
margin: 0 auto;
width: 100%;
}

@media screen and (max-width: 800px) {
video {
width: 100%;
}
}
</style>

<video autoplay loop playsinline muted>
<source src="https://cdn.shopify.com/videos/c/o/v/d88ba5c896284d1a99679e4c96b5ef2c.mp4" />
</video>


Screenshot 2025-01-20 at 8.32.50 PM.pngIMG_3043.jpg

Reply 1 (1)

hammadCodes
Shopify Partner
35 7 4

This will need to build a new section into the theme and make sure it is always behind the menu. Some coding is needed which an expert can perform. Your HTML code is correct but needs refinement

Want to modify or custom changes to the Shopify store? Contact at
Email: contact.ecomvita@gmail.com , Skype: hammad00033 , Webiste: https://hammadCodes.com/
If helpful then please like and accept the solution to help others as well.
Shopify Expert | Founder & CEO --- eComVita