How can I adjust video size for better mobile view?

[orsershirts]

Hi

Hope you can help.

I added a video to my Shopify Home Page, it looks great on the desktop version, on mobile it doesnt sit well.

Do you know how to fix it? is it through code?

Thanks a lot

https://orsershirts.com/ (its the video in the bottom)

[ThePrimeWeb]

Hey @orsershirts ,

What about it do you not like? It looks fine to me. But if there’s particularly something you want to change, please highlight that (possibly with a screenshot/mockup)

[orsershirts]

Try looking from pc and you’ll see the size difference

[ThePrimeWeb]

I looked from both desktop and mobile, honestly I can’t see much of an issue. Maybe you have a different monitor size than I do, could you please post a screenshot of what you are seeing and point out what you don’t like about it and how you want it changed.

[orsershirts]

Do you see what I mean?

x

[Spac-es]

After several hours, I’ve managed to make significant improvements to the width and height of the video based on the device dimensions. This code will only impact tablets and mobile devices.

Hope you like the result! (Remember to add this code to your theme.css or base.css file):

@media (min-width: 620px) and (max-width: 767px) {
#shopify-section-template--16340303020204__background_video_Kn3CHe {
  height: 40%;
}
video.video-js {
  position: relative !important;
  height: 320px !important;
}
#shopify-section-template--16340303020204__background_video_LHNBRA {
  max-height: 325px !important;
}
}

@media (max-width: 619px) {
#shopify-section-template--16340303020204__background_video_Kn3CHe {
  height: 30%;
}
video.video-js {
  position: relative !important;
  height: 200px !important;
}
#shopify-section-template--16340303020204__background_video_LHNBRA {
  max-height: 205px !important;
}
}

[orsershirts]

First of all thank you very very much!!

I added the code to the base.css file and it didnt do anything. And I couldnt find theme.css, do you mean theme.liquid? I placed it there and it also didnt change it.

Thanks again man. really appreciate it.

[Spac-es]

Thanks for your kind words!

To make the code work, you should add it to your base.css since the code is in CSS format. However, if it didn’t work for you, you can add the following code (which is exactly the same, wrapped in ) within the theme.liquid just before this closing tag . You shouldn’t have any issues if you place it there!

[orsershirts]

*I tried to reply on our dm but for some reason I couldnt.

Thank you for the option to give you back bro! You got a coffe on me

It worked! Thank you so much!

If you dont mind I have another question. Is it possible to add audio to the video on the front page?

Thanks again mate

[Spac-es]

You’re welcome, a pleasure! Thanks for the donation! Regarding private messages, for some strange reason, Shopify has disabled this option for me…

Anyway, I’m glad your code worked! I’ll see if I can add audio to the video you mentioned.

[Spac-es]

To add audio to your video, you need to upload the video directly with the audio already included and disable the ‘muted’ attribute in your HTML code. This code should be in a file with a name similar to ‘shopify-section-background_video,’ ending in ‘.liquid,’ and located within the ‘sections’ section. The code containing the ‘muted’ attribute may look like this:

Keep in mind that some browsers block autoplay with sound due to autoplay policy reasons; this is especially common on mobile devices.

[orsershirts]

Found it. How do I delete it? i’ve tried deleting the ‘muted’ part but it didnt work.

[Spac-es]

Replace this code:

with the following one:

[Exodusllc]

Hello, can you assist me. Based upon your work here, my question is along the lines of this topic. I have added a video to my website by adding a “Custom Liquid” section. The video consist of only text and it is shown on both Desktop and Mobile. However, on mobile, the video is extremely small. Can the existing code be modified to make the video larger on Mobile? Here is the code being used (Note that I replace my website with “web address goes here”.

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

[Spac-es]

Can you share the URL of your store with me so I can give you the code directly?

[user1692]

Would beyond appreciate this solution! But why is it showing blank?

[chandrasekhar]

Hi,

Yes, the video layout on mobile can usually be fixed with a bit of CSS. Most Shopify themes, including Dawn, don’t automatically scale videos perfectly for smaller screens. Here are a few ways to adjust it:

1. Use responsive CSS: You can add something like max-width: 100%; height: auto; to your video element so it scales with the screen.

2. Adjust section settings: Some themes allow you to set different video sizes or aspect ratios for mobile in the theme editor.

3. Hire Shopify developer: If you’re not comfortable editing code, a developer (like those from Webkul) can make the video fully responsive for mobile without breaking the desktop layout.

This way, your video will look good on both desktop and mobile.