youtube video in product description too big on mobile

CALtd
Tourist
37 0 1

<iframe width="560px" height="315px" src="https://www.youtube.com/embed/KDmyMTNYALk?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

 

On mobile it looks far too big whilst on my laptop it looks fine

 

any help is much appreciated

 

https://commercialappliance.co.uk/products/split-test

Replies 3 (3)

akshatkedia
Visitor
2 0 0

Hi CALtd,

The reason that is happening is because your YouTube embeds are not responsive. Please use the code below to embed the YouTube video:

<style>.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%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/KDmyMTNYALk' frameborder='0' allowfullscreen></iframe></div>

 

You can use the following service to generate the code for other videos in future: https://embedresponsively.com/

Hope this helps!

CALtd
Tourist
37 0 1

thank you so much , it seems to work so far but how can i make this half the size and still centre aligned? 

akshatkedia
Visitor
2 0 0

Great! To help you with you next requirement can you tell me what are you using to add the YouTube video embed code?