Custom HTML For Video sizing edit - DAWN THEME

[andrew72]

Hello, 

I am trying to change the video height on desktop.

https://obadiahcoffee.com/pages/holiday-shop

My current HTML custom liquid code:

<style>
video {
width: 90%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="https://cdn.shopify.com/videos/c/o/v/b3a780f32b42440eb295bd733787b541.mov">
<source src="https://cdn.shopify.com/videos/c/o/v/b3a780f32b42440eb295bd733787b541.mov">
</video>

[Mehran_Ali]

Hi @andrew72 

You can try adding this CSS 

<style>
video {
width: 90%;
height: 500px !important;
display: block;
margin: 0 auto;
    object-fit: cover;
}
</style>

Note: the above CSS will reduce the size but the video with be cropped don't forget the adjust the height according to your need 

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

[andrew72]

Hi @Mehran_Ali

Do you know how to keep the heights different on mobile and desktop?

Thank you.

[Mehran_Ali]

Yes you can use CSS Media Query for that if you can specify the Heighjt for mobile and desktop I can write the Query for you 

[andrew72]

Hi @Mehran_Ali,

I wanted these settings for desktop:

width: 65%;
height: 800px

And these for mobile:

width: 90%;
height: 300px

Thanks for your help.

[Mehran_Ali · Accepted solution]

Replace the above CSS with this CSS:

<style>
video {
width: 90%;
height: 800px !important;
display: block;
margin: 0 auto;
    object-fit: cover;
}

@media(max-width:768px){
video {
height: 300px !important;
}
}
</style>

 If you need any assistance I can help feel free to ask or check your Info email:

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!