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.
How can i only show elements of q web page in an iframeAsked by perrymanku on August 05, 2013 at 03:35 PM
Hello, I have created this test form:
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
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!
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;">
This will make your form display the video like this: http://form.jotform.us/form/32166087014146
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.
how do i stop this happening
How do i resize the video to be smaller
How can i position the iframe where i want
We can avoid including other elements to the iFrame, so the code will be:
<iframe src="https://www.youtube.com/embed/29DjelOb2AQ?loop=0&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?
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?
Did you include a link to a web page in your last reply? Unfortunately, it wasn't posted. Please try again.
Here is the link: http://form.jotformpro.com/form/32125042363947?
could yo replace this css custom code
by this one:
Also you could change the height of your youtube iframe code to:
Hope it helps!
thanks that has worked :)
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.