Youtube Thumbnail size within product decription on mobile view

Topic summary

A user encountered an issue with YouTube videos embedded in product descriptions appearing cropped on mobile devices while displaying correctly on desktop. The problem occurred on a Shopify store using the Dawn theme.

Solution Found:
The user resolved the issue by implementing a responsive embed container using custom CSS. The solution involves:

  • Creating a container with position: relative and padding-bottom: 56.25% (maintaining 16:9 aspect ratio)
  • Setting the iframe to position: absolute with 100% width and height
  • This ensures the video scales properly across all screen sizes

The fix can be applied to individual product pages by updating the video URL in the provided code snippet. The issue is now resolved with a working implementation.

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

I have help videos from my youtube embembedded in some product descriptions. They show fine on desktop but on mobile they are cropped. How can i make it so it doesnt do this on mobile please

Dawn theme if that matters

first photo is desktop screen shot and the 2nd is mobile,

URL is https://henrybags.co.uk/products/genuine-numatic-henry-front-wheel-40mm

desktop…

mobile…

used this and it works on each product page just change video url

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }