Different video size for desktop & mobile

Retired Boards Appdev Store Design
1

I created a custom liquid section for my home page in my Dawn 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)

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

The problem is that the video looks fine on desktop, but a little too small on mobile, if I change the width from 50% to 100%, 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 50% for desktop; 100% for mobile.

Any solution is appreciated.

Thanks.

Billy

2

Hi Billy, use css media queries to trigger different video widths depending on the user’s current viewport width.

/*mobile - small tablets*/
video {
  width: 100%;
}

/* any screen equal to or wider than 768px */
@media only screen and (min-width: 768px) {
  video {
    width: 50%;
  }
}

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

2 Likes
3

Hello eballeste1,

It worked, you are a diamond!

By the way, do you mind letting me know from where I can learn the knowledge for coding like this ?

4

The overall general technique is called Responsive Design and it takes a lot of research/practice to master it but is mainly a thing you can accomplish with a good designer and, as a dev, good knowledge of CSS. Here is an introduction!

2 Likes
5

Thanks, you’re awesome.

6

Hi Eballeste1

Where do you add this code? in theme.liquid???

Irene

1 Like
7

@eballeste1 how would you change the code if you wanted to have one video for desktop, and a different video for mobile? Thanks!

1 Like
8

https://community.shopify.com/c/technical-q-a/youtube-embedded-videos-not-resizing-for-mobile-dawn-theme/td-p/1575465

9

This will help with all sizing:

https://community.shopify.com/c/technical-q-a/youtube-embedded-videos-not-resizing-for-mobile-dawn-theme/td-p/1575465

10

Please let me know where to add the code.

11

Follow instructions from here:

https://community.shopify.com/c/technical-q-a/youtube-embedded-videos-not-resizing-for-mobile-dawn-theme/td-p/1575465

12

How is this a solution ? Is this the customised liquid code to input on a shopify page ? Because I tried that and it doesn’t help with anything. If this a partial code, then where is the rest ?

13

How did this possibly work? That is not even custom liquid code

14

I’m pretty sure this thread addresses issues of embedding videos via code and not YouTube - so your solution link is not helpful

15

Where do I paste this please? I have the same code as question

16

I am having the same problem with the Debut theme. Can you tell me where exactly to paste this code please?

17

you can paste that in your css file or in the option of custom css

18

Where do I need to enter this code?