How to make embedded video resize with browser?


  • Question

I embedded a video from TechTV in my site using the embed code. However, when the browser is resized, the video does not -- it hangs outside the right edge of the region/block. Is there a way to change this behavior?


At Design for Drupal, Boston at MIT, we recorded this video among many related to design in Drupal.

Check around 21:00 it's discusses video sizing for responsive.

I hope that helps!



The problem with embeds is they use the <iframe> tag, which uses a static width. The trick to responsive video embeds is to wrap that <iframe> in a <div> and then use CSS to style that div so the <iframe> scales within it.

Today, I found this tool that generates that code for you:


Thanks Susan & Chris. I had watched the video but still didn't quite figure it out. I'll give that code generating tool a try next.


Keep us posted. Thanks!