How to make an iframe responsive

Category: 

  • Question

I'm trying to embed a slides.com presentation inside the main page content block. It displays inside the block, but it does not resize when I view it on my phone.

For example, here is a page where a slides.com presentation resizes with the browser:

http://help.slides.com/knowledgebase/articles/254996-embedding-decks

I copied the code and put it into the main page content block in a drupal cloud site, and it is not responsive like it is on the link above:

https://betzi.mit.edu/how-do-i-make-my-main-menu-horizontal

(Yes, my site name is cheezy. This is my playing-around space.)

Any ideas?

8/15/14

In case anyone's interested, I solved this based on the answer given here:

http://drupalcloud.mit.edu/community/how-make-embedded-video-resize-browser

I added a CSS injector rule with the following classes:

.video {
position: relative;
padding-top: 72%;
height: 0;
}

.video-inner {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}

In the first class, "padding-top: is the ratio of height/width for the embedded video. In this case, it was 72%

I then added the first class to the tag surrounding the iframe and the second class in the tag. The embed is now responsive.

9/2/14