Video Appearing Huge on Desktop

Store Design
,

Topic summary

A user is experiencing an issue where a video on their Shopify store (tropetails.com) displays too large on desktop, while the mobile version appears acceptable. They want to resize and center the desktop video to reduce its screen space.

Additional request:

  • Implement autoplay functionality when users scroll over the video

Solutions offered:

Multiple community members provided CSS code snippets to be added to different files:

  • One suggested adding code to theme.liquid before the </head> tag, plus a blog reference for autoplay
  • Another recommended inserting CSS into base.css with adjustable ratio percentage (90%), and asked for clarification on autoplay behavior (whether video should pause after scrolling past)
  • A third solution targeted video-section.css with specific width (50%) and height adjustments

Current status:
The issue remains unresolved—the user reported that attempted solutions did not work, and the video remains oversized. One responder offered direct assistance via collaborator access to the store.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am hoping to get some help with properly sizing a video on my website. Right now, I think the size is fine on the mobile version ( can you let me know your thoughts?)

Is there a way to resize the one on the desktop version so it’s not so huge? more centered on the desktop screen so it fits better and doesn’t take up as much space? Thoughts?

I would also like to know if there is a way I could automatically get the video to play when someone scrolls over it on my website?

the website is www.tropetails.com

Thank you in advance!

2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Result:

AnneLuo_0-1736213139146.png
AnneLuo_0-1736213139146.png1420×648 303 KB

And for automatic video playback, you can refer to the instructions on this blog to achieve it

https://shopidev.shinetechsoftware.com/blogs/675bf523895ae883840771ca

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

3

Hi @margaretcbeeler ,

  • Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
@media screen and (min-width: 990px) {
.video-section.section-template--18089802825868__video_jVT4tQ-padding {
    width: 50%;
    margin: auto;
}
.video-section.section-template--18089802825868__video_jVT4tQ-padding deferred-media {
    --ratio-percent: 90% !important;
}
}

for 90% you can change it yourself to fit the design you want.

  • For autoplay: Do you want it to start playing when scrolled to, and after scrolling past the video, will it turn off, or will it always autoplay?

Please let me know, I will check it.

4

It did not work and I pasted exactly where you said.

5

This did not work, the video is still huge

6

I can help you with it. So I need to access your store. Can you please share me your collaborator code?

7

Hello @margaretcbeeler ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > Video-section.css and paste the following code at the bottom of the file:
body .video-section.section-template--18089802825868__video_jVT4tQ-padding {
    width: 50% !important;
    height:auto !important;
    margin: 0 auto !important;
    display:flex;
    flex-direction:column;
}
body .video-section.section-template--18089802825868__video_jVT4tQ-padding deferred-media {
    --ratio-percent: 110% !important;
}
@media screen and (min-width: 749px) {
    .video-section__media {
        display: block !important;
    }
}

Let me know if you need further assistance!