How to align video on product page properly for mobile view

Store Design
1

Hi you guys,

Hope you are al doing great :slightly_smiling_face:

I have a small problem. I cannot figure out how to align video’s that are on the product page properly for tablet and mobile view. The problem is that the video is not in a several section, but I’ve added it to the description. There are 325+ products so I’m afraid that I need to ad some html / css styling 325 times manually. But that’s okay, as long as it works.

But maybe you guys have an idea on how to fix this? See image below as an example:

Desktop: https://regeljebusiness.nl/collections/boekhouding/products/over-tellow

Mobile:

daisyweber_0-1653038124082.png
daisyweber_0-1653038124082.png314×658 113 KB

2

Hello @daisyweber ,

It is happening because iFrame(video player) size is not defined. You can make it look good just by simply adding below CSS :

iframe {
width: 100%;
}

Outputs :

  1. Mobile

SaaSEnthu_0-1653038745205.png
SaaSEnthu_0-1653038745205.png364×477 99.6 KB

  1. Tablet/iPad

SaaSEnthu_1-1653038769176.png
SaaSEnthu_1-1653038769176.png703×544 166 KB

Let me know you have any confusions

1 Like
3

@SocialAutoPost Hahaha oh woowwww, now I feel stupid. Thank you though! Looks good now:-)

1 Like
4

@daisyweber Hahaha it’s totally fine. Glad to help :blush: