Resizing iframe container

Hello @zukenstein

Your question is not about our plugin. If you want the IFRAME tag to be responsive, configure its width in percentage. If the browser is resized, the IFRAME tag would be resized too.

Best regards.

Hi thanks for getting back to me. The iframe is already set to 100% in width and height but when placed within a html field
of the plugin it appears at the same size no matter how big the actual iframe source page is. This is what I am inserting

<iframe onload="window.parent.scrollTo(0,0)" src="https://81b.co.uk/propdata/sold_prices_search_tnfCUIx4g6wOe5jMpEWBC0rtcQxIJtS2GXwsxTnEQKjVGtyWXm.php" style=."padding:20px;" name="myiFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%" width="100%" allowfullscreen></iframe>

This is the page its loading on

https://81b.co.uk/test/

Thanks

• This reply was modified 4 years, 3 months ago by zukenstein.

Hello @zukenstein

Your problem is with the concept of width and height in HTML development. If you define the width and height in percentage, like in the iframe tag where the width and height are 100%, it is applied relative to its container. If you have entered the iframe tag into the content of an “HTML Content” field, the width and height of the iframe will be the width and height of the DIV tag with the class name dfield into the “HTML Content” field.

Best regards.

Thanks
Yes I know if I define the height of the iframe in pixels or percent the container will use the defined height, but I was asking if there was a way to have the containing element expand or contract to suit the iframe variable size?

I know its possible using css in a normal webpage for example

HTML

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

CSS

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Is there a way of doing something like this through the plugin?

• This reply was modified 4 years, 3 months ago by zukenstein.

Hello @zukenstein

One more time, this question is not related to the plugin. It is about your own code and not the plugin’s code.

In our plugin the selector corresponding to the container class in your example, would be:

#fbuilder .cff-html-field .dfield{}

Best regards.