What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can i only show elements of q web page in an iframe

    Asked by perrymanku on August 05, 2013 at 03:35 PM

    Hello,  I have created this test form:

     

    http://www.jotform.com//?formID=32115294482856

     

    I have created an iframe where I am displaying a page from a website.  However on this page is a video. HOw can I resize the elements of the iframe to only show the actual video content and nothing else?

     

    Please advise if possible

     

    Thanks

    Perry

    elements JotForm video test form
  • Profile Image
    JotForm Support

    Answered by guilledutra on August 05, 2013 at 04:04 PM

    Hi, according to what you are asking, I'd like to know if it is necessary to put the entire webpage inside the iframe  because if you only need to show the video you can just  copy the iframe code of the youtube video, in your case it will be: 

    <iframe width="560" height="315" src="//www.youtube.com/embed/29DjelOb2AQ" frameborder="0" allowfullscreen=""></iframe>

    I think this is better than displaying the whole webpage inside the iframe.

    Hope it helps!

    Guillermo

  • Profile Image
    JotForm Support

    Answered by KadeJM on August 05, 2013 at 04:50 PM

    Hi Perry, it might be better just to embed only the video into your form if thats the case as guilledutra has mentioned. However, if you wanted to lock it to only the video on that page you could use this script:

    <div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 706px;">

    <iframe scrolling="no" src="//www.uccc.co.uk/dummies-video-warning-lights" style="border: 0px none; margin-left: -220px; height: 859px; margin-top: -300px; width: 926px;">

    </iframe>

    </div>

     

    This will make your form display the video like this: http://form.jotform.us/form/32166087014146

  • Profile Image

    Answered by perrymanku on August 05, 2013 at 05:32 PM

    Hello,

     

    I have changed the form to look like this http://form.jotform.co/form/32115294482856

     

    The iframe looks better. However when it loads you will see other leements display quickly first then the video content.

     

    Next problems:

     

    how do i stop this happening

    How do i resize the video to be smaller

    How can i position the iframe where i want

  • Profile Image
    JotForm Support

    Answered by Mike_T on August 05, 2013 at 06:10 PM

    We can avoid including other elements to the iFrame, so the code will be:

    <iframe src="https://www.youtube.com/embed/29DjelOb2AQ?loop=0&amp;wmode=transparent" frameborder="0" width="480" height="295"></iframe>

    On that iFrame code you can control the size, in my example I have set it to 480 x 295 pixels.

    I am not 100% sure, but defaul sizes are probably:

    223 x 142, 320 x 240, 420 x 315, 425 x 264, 480 x 295, 480 x 360, 560 x 345, 560 x 315, 640 x 360, 640 x 385, 640 x 480, 848 x 500, 853 x 480, 960 x 720, 1280 x 720, 1440 x 1080, 1920 x 1080

    We can use some css to control the iFrame position. Where do you want to move it?

  • Profile Image

    Answered by perrymanku on August 07, 2013 at 12:25 PM

    Hello,

     

    I have now embedded the YT code for my video as can be seen here:

    However,  I want to reposition th iframe to be left position in line as close as possible with the red text and I also want to move position down of the iframe.  Please advise how I add css to do this?

     

    Thanks

    Perry

  • Profile Image
    JotForm Support

    Answered by abajan on August 07, 2013 at 12:33 PM

    Hi Perry

    Did you include a link to a web page in your last reply? Unfortunately, it wasn't posted. Please try again.

    Thanks

  • Profile Image

    Answered by perrymanku on August 07, 2013 at 12:44 PM

    Sorry,

     

    Here is the link:  http://form.jotformpro.com/form/32125042363947?

  • Profile Image
    JotForm Support

    Answered by guilledutra on August 07, 2013 at 01:41 PM

    Hi,

    could yo replace this css custom code

    #id_8 {

    margin-top: 5.5em;

    float: right;

    }

    by this one:

    #id_8 {

    float: right;

    margin-top: 120px;

    margin-right: 12px;

    }

    Also you could change the height of your youtube iframe code to:

    height="300"

    Hope it helps!


  • Profile Image

    Answered by perrymanku on August 08, 2013 at 12:54 AM

    thanks that has worked :)

  • Profile Image

    Answered by khrisell on August 08, 2013 at 01:06 AM

    Hello perrymanku,

    In behalf of my colleagues, You are most welcome.

    We are glad that it is working now.

    Feel free to contact us anytime if you need any assistance.

    Thank you for using JotForm.