Custom HTML For Video sizing edit - DAWN THEME

Store Design
,

Topic summary

Goal: Adjust the embedded video’s size in a Dawn theme page, especially increasing desktop height.

Context: The current custom Liquid/CSS sets video { width: 90%; height: auto; }. The video is embedded with muted/autoplay/loop attributes and two identical .mov sources.

Proposal: A helper suggested using CSS to change size, noting that increasing/decreasing height can crop the video and should be tuned. To have different sizes on desktop and mobile, they recommended CSS media queries (conditional CSS based on screen width).

Requested specs:

  • Desktop: width 65%, height 800px.
  • Mobile: width 90%, height 300px.

Latest update: The helper said to replace the CSS with a media query solution, but the actual CSS code was not included in the post (empty code blocks). No concrete breakpoint values (e.g., pixel widths) were discussed.

Status: Unresolved/ongoing. Next step is to provide the media query CSS implementing the specified desktop and mobile dimensions, and confirm whether cropping is acceptable or if object-fit adjustments are needed. Code snippets are central to this thread.

Summarized with AI on December 14. AI used: gpt-5.
1

Hello,

I am trying to change the video height on desktop.

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

My current HTML custom liquid code:

video { width: 90%; height: auto; display: block; margin: 0 auto; }
2

Hi @andrew72

You can try adding this CSS

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!

3

Hi @Mehran_Ali

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

Thank you.

4

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

5

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.

6

Replace the above CSS with this CSS:

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!

1 Like