Dawn Theme - Video too small on mobile

[orchiworld]

DAWN THEME 

Added a video as a custom liquid (to make the video autoplay) at the top of my page. 

I need help readjusting the size of the video both on desktop and mobile. 

Website: www.orchi.com 

Login: orchi-com 

The video is too big on dekstop, and way to small on mobile. 

I need a custom code to fix both issues. 

Desktop: Slightly smaller. 

Mobile: Way bigger. 

[Dan-From-Ryviu]

Hi @orchiworld 

You can add this code to the video section to make the video higher

@media (max-width: 749px) {
video { width: auto !important; height: 60vh !important; }
}

[orchiworld]

Thank you very much. Where would I paste this code?

[ProtoMan44]

@orchiworld   hey, thanks for posting here.
 let me check

but I have a question .... why not use theme section for it?
, thanks.

[orchiworld]

Hi @ProtoMan44 

Well, good question. I am no expert on this, so if there's a better / easier solution for this then please feel free to let me know. 

[ProtoMan44]

@orchiworld  ok, not a problem for now i have to write the code for you, hope it will helpful for you.

[ProtoMan44]

@orchiworld 
Please put this code in the custom CSS section.

and put these code there.

video{
    max-height: 600px;
    object-fit: cover;
}
@media (max-width: 749px) {
video {
    min-height: 100vh;
 }
}

if it useful so please mark it as solved thanks. 

[orchiworld]

@ProtoMan44 
This definetely worked! But I do need to readjust it a bit. I need to be slightly smaller on mobile and slightly bigger on desktop. Which settings should I adjust to fix this? 

[ProtoMan44 · Accepted solution]

@orchiworld  so replace old code with 

video{
    max-height: 7500px;
    object-fit: cover;
}
@media (max-width: 749px) {
video {
    min-height: 70vh;
 }
}

[orchiworld]

That's it! This worked wonders. 

Thank you, much appreciated.