Product page: how do you make the width of video fit in the screen on responsive mode?

Technical Q&A
1

Hi all,

I would like to make the width of video fit in the screen on responsive mode on the product page.

How do you do this?

URL:

https://hobot-jp.myshopify.com/products/hobot_001

Thank you in advance.

γ‚Ήγ‚―γƒͺγƒΌγƒ³γ‚·γƒ§γƒƒγƒˆ 2023-01-13 16.32.17.png
γ‚Ήγ‚―γƒͺγƒΌγƒ³γ‚·γƒ§γƒƒγƒˆ 2023-01-13 16.32.17.png3500Γ—2555 745 KB

γ‚Ήγ‚―γƒͺγƒΌγƒ³γ‚·γƒ§γƒƒγƒˆ 2023-01-13 16.33.11.png
γ‚Ήγ‚―γƒͺγƒΌγƒ³γ‚·γƒ§γƒƒγƒˆ 2023-01-13 16.33.11.png1360Γ—2319 337 KB

2

You can try to change width of video from 480 to 100% in video code that you added in your product description

Screenshot 2023-01-13 at 15.00.22.png
Screenshot 2023-01-13 at 15.00.22.png1259Γ—306 30.5 KB

1 Like
3

Hi @harukajmickey

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file β†’ Save

video {

width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

4

Thank you it worked!