How to adjust width of a video on desktop but not on mobile

Store Design
1

Hi,

I have a few videos on my store that work great with 100% width on mobile but not on desktop. They start to get blurry and I want to decrease their width to 50%. They are located on specific product descriptions.

I think I need to use media queries in order to change the width only on desktop but I’m not a coder and I have no idea where to place the code to only change individual videos on a product page.

So

  1. What code should I use?

  2. Where should I put the code to change an individual video on a product page?

Also, I’m using the following code directly in the description to insert the video and add loop+autoplay (it works). I would like to keep this added to the video when the width of the video on desktop is changed.

Thank you so much!

2

HTML:

CSS:

@media only screen and (max-width: 750px){
.video_new{
    width:100%;
    height:20vw;
}
}

You can try adjusting the width and height of the video on mobile

3

@NicolaiS98

Hi,

If you inset the video in the description, you can wrap around the video with a class name my_product_video as below.

And then, add a class detail in your CSS file such as theme.css, base.css, style.css or custom.css file as below.

@media screen and (min-width: 750px) {
  .my_product_video {
    max-width: 50%;
    width: 50%;
  }
}

That’s for PC only. You may change the max-width & width value to fit your needs.

If you have other videos with different width, you may change the class name (like my_product_video_1, my_product_video_2, and my_product_video_3) and add the class value on the CSS file.

Hope it helps.

4

Hello @NicolaiS98

I would like to give you a solution to support you.

You need to add a class to your video code https://prnt.sc/5kWgKUPZ9swu
Code:

Then add below code by following these steps:

  1. Go to Online Store → Theme → Edit code https://prnt.sc/fJOF9RnL7Rp5

  2. Open your theme.liquid theme file

  3. Paste the below code before https://prnt.sc/ux-pSvtsrL9b

I hope my solution can work and support for you.

Best regards,
GemPages Support Team

5

You are a star! Thank you so much - it worked perfectly! :slightly_smiling_face: