How can I make the "Iframe Embed" widget responsive?

  • Profile Image
    BertSnow
    Asked on August 22, 2019 at 01:39 PM

    I am embedding web content with the iframe embed widget. (I'm embedding webflow content).  The "iframe embed" widget just appears to take an https:// address and I don't see a way to pass embed commands to it.

    Is there a way to make an iframe within a form responsive (ie it resizes)?  

    Or is there another way I should be embedding content?

    The iframe embed is at the top of this test form.

    Thanks! 

  • Profile Image
    stevenmarshall
    Answered on August 22, 2019 at 02:57 PM

    Hi @BertSnow,

    One option is to add CSS code via the widget to resize.

    Just click the widget field and then click the "Widget Settings" button. After that, go to the "Custom CSS" tab and paste the code. Click the "Update Widget" button when you're done.

    Example code below:

    iframe {
    width: 340px !important;
    }

    1566498802Screen Shot 2019-08-22 at 11.3

    I also found this thread regarding making the iFrame embed widget be more responsive.

    You can view the thread here: https://www.jotform.com/answers/1370128-How-do-I-make-my-embedded-iframe-responsive

    Please let us know if you have any further questions.

    Thank you

  • Profile Image
    BertSnow
    Answered on August 22, 2019 at 03:48 PM

    Thanks Steven.

    The CSS code below has the effect of having the iframe resize somewhat, and crop in to the active area.   (But it doesn't shrink the "whole iframe" so that it all fits.


    iframe {

    width: 100% !important; 

    }


    If I look generally at CSS commands around responsive sizing, will they likely work?

    ..or are there specific things about the way that the jotform iframe widget is implemented?


    thanks!



  • Profile Image
    JohnRex
    Answered on August 22, 2019 at 05:13 PM

    Please try using this code and see if it makes any difference:

    iframe{

    max-width:100%!important;

    height:auto;

    }

    If I look generally at CSS commands around responsive sizing, will they likely work?

    Yes, it will work. You can also refer to this article: https://www.w3schools.com/css/css_rwd_mediaqueries.asp



  • Profile Image
    BertSnow
    Answered on August 22, 2019 at 05:52 PM

    Thanks - the max-width helped, and thanks for the reference.  This gets me what I need for right now, and I'll see what else is needed as  I try other media types in the iframe.