How to Dynamically Change the Size (scale, height and width) of a "Shopify-hosted video" for Desktop

[amiable_beaver]

Hi everyone, here's my first community post. I've searched online for days for a solution to this and have not found one successfully, yet. I want to solve the problem of not being able to change the size/scale/height & width - however, you want to describe it, specifically, of a "Shopify-hosted video" and I use the term very deliberately. Not a YouTube video embedded with an iframe or embedding from a URL.

Specifically, this:

The video I want to feature is recorded in portrait 1920x1080 (9:16 ratio) videos for my store. The video and Shopify page you see in my examples are for test purposes and not the actual product. I recorded portrait because I want to optimize content for mobile devices. That said, I do still care about how my store displays on desktop.

When viewing the videos on my store in desktop view, the video displays at a scale that is way too large. I have to scroll up and down on my screen to view the video. Here is a recording of my screen demonstrating the issue:

As you can see, the video is perfectly viewable when using mobile view. However, when switching to desktop view, the video becomes so large I have to scroll up and down to view the whole video which I can't have for my store.

As you can see in the video, Shopify offers the option to "Make section full width" which in turn scales the video to be as large as the window it is opened in. This is fine is viewing in mobile but makes the issue even worse if viewing in desktop. The reason I point this feature out is that it shows that Shopify can dynamically scale the size of a video. Is there a feature that can do this but on a smaller scale? For example, to be half of the size.

Some more information to say about the problem:

• I don't want to embed a YouTube video because the experience/quality of viewing a video is decreased IMO - you get all the YouTube logos, loading, and then recommended videos at the end of the video which distracts from the website. I only want to use the "Shopify-hosted video" option for displaying videos.
• I don't want a solution that involves editing the website's code like editing theme.liquid that would affected the sizing of videos for the entire website - I am only looking for a solution that applies to specific "Shopify-hosted videos".

I'll post any more information to help explain and add color to the problem as it comes and I will edit the post if I end up finding a solution in the meantime.

Thank you for your help in advance.

[amiable_beaver]

Update:

I'm trying to use variants of the following CSS in the section and I don't seem to be getting results with it. Shopify seems to be telling me I have the wrong ID reference

#shopify-section-18077432676589 {
  padding: 0 25%;
  width: 100%;
  height: 50vh;
  overflow: hidden;
}

and

#shopify-section-18077432676589 {
  padding: 0 25% !important;
  width: 100% !important;
  height: 30vh !important;
  overflow: hidden !important;
}

I'm struggling to find what the correct section ID would be or I'm not sure if I'm formatting the ID correctly. When I use inspector I hover over the section and this appears to be the ID but I must be missing something.

[amiable_beaver]

Looking deeper into identifying the Section ID I think I found that the ID in my instance is the following:

<section id="shopify-section-template--18077432676589__video_8RKekQ"

I think the whole string "shopify-section-template--18077432676589__video_8RKekQ" is the section ID I'm looking for and not the numeric value I listed above. However, I tried inputting that in the Custom CSS section and it seems like Shopify won't accept a Section ID? I'm confused because I believe I've seen this used on other Shopify Forum posts - for example: https://community.shopify.com/c/shopify-design/how-can-i-resize-a-video-to-50-of-its-current-height-...

What am I missing here?