Title: Resizing iframe container
Last modified: August 24, 2020

---

# Resizing iframe container

 *  Resolved [zukenstein](https://wordpress.org/support/users/zukenstein/)
 * (@zukenstein)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/)
 * 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](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/#post-13305668)
 * Hello [@zukenstein](https://wordpress.org/support/users/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](https://wordpress.org/support/users/zukenstein/)
 * (@zukenstein)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/#post-13305818)
 * 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](https://wordpress.org/support/users/zukenstein/).
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/#post-13306203)
 * Hello [@zukenstein](https://wordpress.org/support/users/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](https://wordpress.org/support/users/zukenstein/)
 * (@zukenstein)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/#post-13306266)
 * 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](https://wordpress.org/support/users/zukenstein/).
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/#post-13306327)
 * Hello [@zukenstein](https://wordpress.org/support/users/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.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 5 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/resizing-iframe-container/#post-13306327)
 * Status: resolved