FROM CACHE - en_header

Different video size for desktop & mobile

Solved
Billy_Cheng
Tourist
8 0 2

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)

<style>
video {
width: 50%;
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 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

Accepted Solutions (2)

Accepted Solutions
eballeste1
Excursionist
23 4 16

This is an accepted solution.

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

View solution in original post

eballeste1
Excursionist
23 4 16

This is an accepted solution.

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!

View solution in original post

Replies 13 (13)
eballeste1
Excursionist
23 4 16

This is an accepted solution.

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

Billy_Cheng
Tourist
8 0 2

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 ?
 
eballeste1
Excursionist
23 4 16

This is an accepted solution.

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!

Billy_Cheng
Tourist
8 0 2

Thanks, you're awesome.

Irene_Otto
Excursionist
15 0 7

Hi Eballeste1

 

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

 

Irene

bikerboi
Excursionist
24 1 8

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

 

patrickanthony
Excursionist
23 2 6
a4ashan
New Member
1 0 0

Please let me know where to add the code. 

patrickanthony
Excursionist
23 2 6
AnnMarie1
New Member
5 0 0

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 ? 

AnnMarie1
New Member
5 0 0

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

AnnMarie1
New Member
5 0 0

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