Why is the video size error occurring on my product page?

Store Design
, , , ,

Topic summary

A user is experiencing video sizing issues within their product description tab across all device views. The embedded video doesn’t automatically fit the product card dimensions, creating display problems.

Initial Problem:

  • Video not fitting properly in product description area
  • Issues present on both desktop and mobile views

Solution Approach:
PageFly-Victor provides CSS code to be added to the theme.scss file:

  • Targets .product-single__description.rte iframe elements
  • Uses width: fit-content and media queries for responsive sizing

Iterative Fixes:
Multiple code revisions were needed to address:

  • Excessive gaps appearing around the video
  • Mobile view spacing issues
  • Lost padding in description area
  • Different height requirements for various screen widths (max-width: 376px, 400px, 767px)

Latest Code:
The most recent solution includes:

  • Adjusted margins and padding for desktop/mobile
  • Specific height values (180px, 188px) for different mobile breakpoints
  • Width calculations using calc(100% - 5px)
  • Targeting grid layout elements to maintain proper spacing

The discussion remains ongoing as the user continues testing the responsive behavior across devices.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

I have an issue with video size in the product description tab , all views!

Alliance_0-1672842440686.png
Alliance_0-1672842440686.png1920×1080 282 KB

Thank you

allianceautoproducts.com

2

allianceautoproducts.com

3

It must automatically fit the size of the card in all views.

4

Hi [email removed]Alliance,

You can try this code by following these steps:

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

Step 2: Search file theme.scss or theme.scss.liquid,

Step 3: Paste the below code at bottom of the file → Save

.product-single__description.rte iframe{width:fit-content !important}

PageFlyVictor_0-1672848379643.png
PageFlyVictor_0-1672848379643.png916×1028 79.5 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

5

Thank you. But there is a not of gap.

Screenshot 2023-01-04 191227.jpg
Screenshot 2023-01-04 191227.jpg1920×1080 153 KB

6

Mobile view needs some adjusting too:

Screenshot_20230104-191521_Chrome.jpg
Screenshot_20230104-191521_Chrome.jpg1080×1920 143 KB

7

you can remove old code and replace it with new code

.product-single__description.rte{
margin-left:-25px !important;
padding-right:0 !important
}   
 .product-single__description.rte iframe{
width:calc(100% - 5px) !important;
height:200px !important
}
@media(max-width:767px){
.product-single__description.rte{
margin-left:-0 !important;
}   
}
@media(max-with:1024px) and (min-width:768px){
.product-single__description.rte iframe{
height:120px !important
}
8

Gap in mobile view:

InkedScreenshot_20230104-194055_Chrome_LI.jpg
InkedScreenshot_20230104-194055_Chrome_LI.jpg1080×1920 143 KB

9

please remove the old code and replace the new code

.product-single__description.rte{
margin-left:-25px !important;
padding-right:0 !important
}   
 .product-single__description.rte iframe{
width:calc(100% - 5px) !important;
height:200px !important
}
@media(max-width:767px){
.product-single__description.rte{
margin-left:0 !important;
} 
.product-single__description.rte iframe{
width:100% !important;
}  
div#ProductSection-product-template .grid__item.medium-up--one-third{
padding:0 5px !important
}
}
@media(max-with:1024px) and (min-width:768px){
.product-single__description.rte iframe{
height:120px !important
}

PageFlyVictor_0-1672852371173.png
PageFlyVictor_0-1672852371173.png704×1470 120 KB

10

Two things happened:

1- discription padding gone…

Padding.jpg
Padding.jpg1080×1920 215 KB

2- some gap still there in mobile view

padding2.jpg
padding2.jpg1080×1920 157 KB

11

you can replace the old code

@media(max-width:767px){
.product-single__description.rte{
margin-left:0 !important;
} 
.product-single__description.rte iframe{
width:100% !important;
}  
div#ProductSection-product-template .grid__item.medium-up--one-third{
padding:0 5px !important
}
}

by the new code

@media(max-width:767px){
.product-single__description.rte{
margin-left:0 !important;
} 
.product-single__description.rte iframe{
width:100% !important;
}  
div#ProductSection-product-template .grid__item.medium-up--one-third:has(.tabs li:last-child a.active){
padding:0 5px !important
}
}
@media(max-width:400px) and (min-width:376px){
.product-single__description.rte iframe{height:188px !important}
}
@media (max-width:376px){
.product-single__description.rte iframe{height:180px !important}
}