Different Video Size For Desktop & Mobile

[Emerson4]

I created a custom liquid section for my home page in my Refresh theme to display a video(the video was uploaded to my store files, not from Youtube), below is the code :(the code was from some where on internet, I know only a bit about coding)

<style>
video {
width: 35%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src="the URL of the video"
</video>

The problem is that the video looks fine on desktop, but a little too small on mobile, if I change the width from 35% to 90%, then it looks good on mobile, but way too big on desktop.

My question is; how to separate the video for desktop and mobile individually? The ideal width is 35% for desktop; 90% for mobile.

Any solution is appreciated.

Thanks.

Emerson

[Moeed · Accepted solution]

Hey @Emerson4 

To address the issue of adjusting the video size separately for desktop and mobile devices in your custom liquid section, you can utilize media queries to apply different styles based on the screen size. Here's an example of how you can modify your code to achieve this:

<style>
  video {
    width: 35%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  @media (max-width: 767px) {
    video {
      width: 90%;
    }
  }
</style>

<video muted autoplay playsinline loop>
  <source src="the URL of the video">
</video>

In the above code, we introduce a media query @media (max-width: 767px) to target screens with a maximum width of 767 pixels, typically representing mobile devices. Inside this media query block, we adjust the width property of the video element to 90%, allowing the video to occupy a larger portion of the mobile screen.

For screens wider than 767 pixels, the default styles defined outside the media query will be applied, setting the width of the video element to 35%. This ensures that the video retains the desired size on desktop devices.

By incorporating this code into your custom liquid section, you should achieve the desired result of having a different video size for desktop and mobile devices. Feel free to adjust the pixel value in the media query (max-width: 767px) to best fit your specific design requirements.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Emerson4]

Thank you, worked well!

[Clov1234]

Hi!
I tried your code (and it worked beautifully, THANKS!).
I got a problem when I wanted to 'zoom' in the video in mobile format. (I'd like to scale it up only in mobile to be able to look at it easily.) I actually did scale the video up it with your code and it's working, but the video seem to be aligned to left of the screen and it's causing a "glitch" in the layout : you can scroll horizontally when aligned to the video. 

My ideal would be to have that difference in scale in mobile and desktop, but to keep the center of the video at the same place in both format without adding any weird horizontal navigation.

I'd be really glad if you (or anyone) could help me with this.
Thanks a million in advance.

The code I use : 

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

@media (max-width: 767px) {
video {
width: 250%;
}
}
</style>

<video muted autoplay playsinline loop>
<source src="YOUR VIDEO">
</video>

[Haywoodb]

Did you find a solution? I need help with this.