Different video size for desktop & mobile

[Billy_Cheng]

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

[eballeste1 · 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

[eballeste1 · 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]

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 · 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]

Thanks, you're awesome.

[AnnMarie1]

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

[Irene_Otto]

Hi Eballeste1

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

Irene

[patrickanthony]

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

[AnnMarie1]

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

[bikerboi]

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

[patrickanthony]

This will help with all sizing: 

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

[a4ashan]

Please let me know where to add the code. 

[patrickanthony]

Follow instructions from here:

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

[AnnMarie1]

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]

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