Video width on mobile display

[stoo_s]

Here I go with my first of many, many questions this afternoon. I've used HTMLBlock to add a video to the Top Right area of my homepage and it displays perfectly on laptop and tablet as I've set the width and height to the same as the jpeg below. However, on the mobile site it's too wide and overflows beyond the width of everything else. I've tried to add a container div to the embed code and then added some code in the global.css file (as per instructions here: http://coolestguidesontheplanet.com/videodrome/youtube/) but the video ended up 1px wide between the slider and it's original place. I realise that getting video to be responsive on a mobile site is a giant pain in the ass but would be grateful for any help with this. My homepage is http://www.thelearningemporium.co.uk/shop/

 

Thanks in advance

 

Stuart

[stoo_s]

Hi Enrique,

 

Thanks for your help but I've not managed to get it working. I've added the CSS to global.css and have disabled the HTMLblock but when I try to add the code to themeconfigurator I'm being met with 'Invalid Content.' I've gone to 'Add Item' in back office and then added the suggested code to the 'HTML' block after selecting 'Top' Hook from the drop down menu. Should I be adding your code directly to a css file instead?

 

Thanks,

 

Stuart

[stoo_s]

Aha, thought I might be missing something obvious. Thanks for all the help, working perfectly now!

Edited March 14, 2015 by stoo_s (see edit history)

[stoo_s]

Thanks for that, it's definitely better without the border!