- perrymankuAsked 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
- JotForm SupportguilledutraAnswered 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!
- KadeJMAnswered 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;">
This will make your form display the video like this: http://form.jotform.us/form/32166087014146
- perrymankuAnswered on August 05, 2013 at 05:32 PM
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
- JotForm SupportMike_TAnswered 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&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?
- perrymankuAnswered on August 07, 2013 at 12:25 PM
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?
- JotForm SupportabajanAnswered on August 07, 2013 at 12:33 PM
Did you include a link to a web page in your last reply? Unfortunately, it wasn't posted. Please try again.
- perrymankuAnswered on August 07, 2013 at 12:44 PM
Here is the link: http://form.jotformpro.com/form/32125042363947?
- JotForm SupportguilledutraAnswered on August 07, 2013 at 01:41 PM
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!
- perrymankuAnswered on August 08, 2013 at 12:54 AM
thanks that has worked :)
- khrisellAnswered on August 08, 2013 at 01:06 AM
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.