Resizing iframe container

  • Resolved zukenstein

    (@zukenstein)


    5 years, 9 months ago

    Hi I am loading an iframe within an html field is it possible to make the html field responsive as the page that loads in the iframe can vary in size.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author codepeople

    (@codepeople)

    5 years, 9 months ago

    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.

    Thread Starter zukenstein

    (@zukenstein)

    5 years, 9 months ago

    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 5 years, 9 months ago by zukenstein.
    Plugin Author codepeople

    (@codepeople)

    5 years, 9 months ago

    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.

    Thread Starter zukenstein

    (@zukenstein)

    5 years, 9 months ago

    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 5 years, 9 months ago by zukenstein.
    Plugin Author codepeople

    (@codepeople)

    5 years, 9 months ago

    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.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Resizing iframe container’ is closed to new replies.