Different video size for desktop & mobile

Solved
Billy_Cheng
Tourist
3 0 0

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
22 4 8

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
22 4 8

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 5 (5)
eballeste1
Excursionist
22 4 8

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

Billy_Cheng
Tourist
3 0 0

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
22 4 8

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

Billy_Cheng
Tourist
3 0 0

Thanks, you're awesome.

Irene_Otto
Excursionist
15 0 6

Hi Eballeste1

 

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

 

Irene