How to make embedded video resize with browser?

Category: 

  • Question

svdavies@mit.edu

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?

8/26/14

smacphee@mit.edu

At Design for Drupal, Boston at MIT, we recorded this video among many related to design in Drupal. https://www.youtube.com/watch?v=oBphfu2_gJc

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

I hope that helps!

Susan
macpheedesign.com

8/26/14

csgiles@mit.edu

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:

http://embedresponsively.com

9/26/14

svdavies@mit.edu

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.

9/26/14

smacphee@mit.edu

Keep us posted. Thanks!

9/30/14