Dawn theme - How do you show different banner images/video on mobile vs desktop?

[Ankita31]

I've created an image banner with a video. However the video is getting cropped to a 3:2 ratio aspect. I need the video in full/adjusted to the devices its used on. What custom CSS do i need to add?

used the following shopify thread: https://community.shopify.com/c/shopify-design/i-want-to-add-video-instead-of-banner-image-for-home-...

Secondly, how do i show different banner images/video on mobile & desktop in Shopify dawn theme?

 
Preview shop: https://www.smara.co.uk/?_ab=0&_fd=0&_sc=1

[PaulNewton]

The referenced website has no video section shown for others to be able to inspect.

Use the newer aspect-ratio CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio 

To be clear "cropping" video with CSS will not actually crop the video file content itself, the CSS would only hide the edges or scale the video down/up to fit.

This also means the same amount of bandwidth is still used by customers phones even though your showing less content visually.

If a theme doesn't already have a way to show different content for different screen sizes Having completely different media for desktop or phone requires an advanced theme customization to add an additional setting or to hardcode the differing media or some sort of logic to get the correct media.

If you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.