How to make an iframe responsive


  • Question

I'm trying to embed a 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 presentation resizes with the browser:

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:

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

Any ideas?


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

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.