Solved

Different video size for desktop & mobile

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)

eballeste1
Excursionist
23 4 17

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 17

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 17 (17)

eballeste1
Excursionist
23 4 17

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 17

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.

AnnMarie1
New Member
5 0 0

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

Irene_Otto
Shopify Partner
18 0 13

Hi Eballeste1

 

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

 

Irene

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 

bikerboi
Excursionist
24 1 9

@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
Visitor
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 ? 

ClaireMon
Visitor
1 0 0

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

Blewprent
Visitor
2 0 0

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

Danishshopdev
Shopify Partner
163 17 20

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

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
KhallP
Excursionist
63 0 11

Where do I need to enter this code?