Is responsive video sizing in Dawn theme possible?

[JC671]

I want the website to display videos in different sizes for mobile, desktop, and tablet.

Is this possible for Dawn through theme editor somehow? 

- Currently, the videos are either too large on desktop or too small on mobile.

- Videos are posted on pages by a custom liquid section.

Example of custom liquid:

<style>
video {
display: block;
margin: 0 auto;
width: 80%;
height: 50%;
}
</style>
<video autoplay loop playsinline muted>
<source src="https://cdn.shopify.com/videos.mp4">
</video>

I appreciate any help or feedback, thank you.

[Liam · Accepted solution]

HI JC671,

It's possible to instruct browsers to render video elements in different sizes for Dawn (or other themes) by using media queries to set up rules for specific screen sizes. With media queries you can use the `max-width` CSS property to target devices with screens smaller than a certain width. Since your videos are being included in the custom liquid section, you can add media queries to the existing CSS, so it would look something like:

<style>
video {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 50%;
}

/* Tablet styles */
@media (max-width: 1023px) {
    video {
        width: 90%;
        height: 55%;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
    video {
        width: 100%;
        height: 60%;
    }
}
</style>

The properties for tablet/ mobile max-widths are just placeholders and you can change them to work as you'd like. You'll also need to test the video display on different devices or use browser developer tools to simulate different screen sizes. 

Hope this helps!

[JC671]

Thank you so much! That solution works.

For anyone who had the same issues, please see Liams response. 

For my site, this is what the custom liquid looks like now:

<style>

video {

display: block;
margin: 0 auto;
width: 60%;
height: 50%;

}

/* Tablet styles */
@media (max-width: 1023px) {
video {
width: 90%;
height: 55%;
    }
}

/* Mobile styles */
@media (max-width: 767px) {
video {
width: 90%;
height: 60%;
    }
}
</style>
<video autoplay loop playsinline muted>
<source src="videolinkexample.mp4">
</video>

tags:

Responsive video in Dawn theme

How to resize videos in Dawn theme

Resize video for desktop and mobile screens 

Shopify custom liquid video size