Resizing an iFrame (using iFrame embed widget)

  • Profile Image
    Asked on August 30, 2017 at 10:20 AM

    Hello Jotform,

    I'm facing another problem using Iframes,

    I cant display my content - via iframe - at the right size, even setting the size in px in the plugin options.


    Here is the content :

    (approx. 370x 280px)

    Here the result embed :

    with theses ugly black borders, after differents attemps, i cant find a solution... can you help me ?







  • Profile Image
    Answered on August 30, 2017 at 12:06 PM

    Please inject this custom CSS inside the widget to decrease the width of the iFrame:

    iframe {
    width: 340px !important;

    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.

    Here's the result:

    Here's a demo form:

    Hope that helps. Thank you.

  • Profile Image
    Answered on August 31, 2017 at 05:32 AM

    Hello Jan,

    Thank you for your message. I adjusted height and width to get ride off of the black iframe's background. This work on Safari, Chrome & Firefox.

    iframe {width: 300px !important; height: 371px !important;}

    1) Its working :) but the solution is not so neat, here a way to delete that black background of modifying it to white or transparent ?

    2) I also had scrolling bar inside the iframe when i move the cursor over it. How can i stop to display them. I guess its by using the attribute frameborder=0 but where can i fix that ?


    Thanks a lot,





  • Profile Image
    Answered on August 31, 2017 at 08:17 AM

    I assume you're referring to this:

    I don't see the black background?

    Also, do you need the scrollbars removed or no? 

    I searched for some CSS to fix that issue, but none worked so far.

    I'll check further.

    Thank you!


  • Profile Image
    Answered on August 31, 2017 at 09:57 AM

    Hello !

    I was reffering to the background of an iframe (like when you embed an youtube video with the wrong size). There some black bars on each side of the content. The problem was fixed setting the right ratio height/width in px for the iframe (like in my last example). But im still afraid of browsers i was asking for remove that black background ou turn it white. If its not possible, i will deal with.

    And, yes i need to remove the scrollbars in the Iframes. It my real question.





  • Profile Image
    Answered on August 31, 2017 at 11:26 AM

    I checked the webpage you are trying to embed and I noticed that the background-color of the wrapper where the animation is set to "black" or "rgba(0,0,0,0)". It should be "rgba(255,255,255,1);", which is equal to "white".

    I created a separate thread for your next issue. Please wait for my reply on this thread:

    Thank you.