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:
position: relative and padding-bottom: 56.25% (maintaining 16:9 aspect ratio)position: absolute with 100% width and heightThe 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.
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%; }
