Embedding HTML5 Youtube Video On Your Form

  • Profile Image
    krecicki
    Asked on July 22, 2013 at 05:46 PM

    I used the old emebd code from the YouTube video.

    JotForm does not accept iFrame tags for HTML5

     

    Attached is what it looks like on my device. Empty.

     

    On the computer, works just fine. This is a mobile

    landing page with a video and a few form fields.

     

    Please help me fix my video issue.

  • Profile Image
    jefreylandicho
    Answered on July 22, 2013 at 05:59 PM

    Please try creating an html page and use the IFRAME code to insert the html page that has the youtube html5 code. e.g.

    <iframe src="videopage.html"></iframe>

    Another approach would be using the the code below. 

    <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen frameborder="0"> </iframe>

    then replace the video ID with your youtube video ID while the width and height is for adjusting the video size.

    Some platform does not support or has problem support flash which is being used for the youtube old embed code.

    If you need further assistance, please contact us again.

  • Profile Image
    pinoytech
    Answered on July 22, 2013 at 06:00 PM

    Hi,

    Can you please take a look at this cloned form if this works? http://www.jotformpro.com/form/32026805289961

    Youtube Embed code:

    <iframe width="228" height="128" src="//www.youtube.com/embed/cJ-GqDzhdgM" frameborder="0" allowfullscreen></iframe>

    Thank you!

  • Profile Image
    krecicki
    Answered on July 22, 2013 at 06:05 PM

    The code vanishes.

  • Profile Image
    pinoytech
    Answered on July 22, 2013 at 06:10 PM

    Using the embed code(Youtube) that I've provide on my response, it should fixed the issue.

    Youtube Embed code:

    <iframe width="228" height="128" src="//www.youtube.com/embed/cJ-GqDzhdgM" frameborder="0" allowfullscreen></iframe>

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image
    krecicki
    Answered on July 22, 2013 at 06:11 PM

    OK.

     

    This is the problem. I cannot paste the video into my HTML area or it'll remove itself when I update and close the window. I copy pasted your code too.

     

    It just won't work in my editor. Do I need to upgrade?

  • Profile Image
    jefreylandicho
    Answered on July 22, 2013 at 06:32 PM

    Please use the IFRAME code below.

    <iframe width="228" height="128" src="//www.youtube.com/embed/cJ-GqDzhdgM" frameborder="0" ></iframe>

    and use the HTML icon located at the top to add the IFRAME code.

    For additional reference, I created an example on your account which can be found on the link below.

    http://www.jotform.com/form/32026989695167

  • Profile Image
    krecicki
    Answered on July 22, 2013 at 06:40 PM

    I see you made one on my account.

     

    My issue still remains. I cannot edit it. There is no HTML code in my box when I click the little blue HTML button on the bottom of the box.

     

    No code.

     

    Here is an example of what I mean

    http://tinypic.com/r/126feyw/5

  • Profile Image
    pinoytech
    Answered on July 22, 2013 at 06:44 PM

    Hi,

    To embed your Youtube iFrame code into your form using HTML field, please follow this simple steps on this video: http://www.screencast.com/t/ZZRtHVP2GEn

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image
    krecicki
    Answered on July 22, 2013 at 06:47 PM

    Here is my problem http://tinypic.com/r/126feyw/5

     

    That is a picutre of a form one of your support guys made for me. I can't even see his code. iFrame won't work in my editor, it just refuses to display anything in those tags.

     

    I can't use his example as a template because I cannot see his code. But, the video works, it is there.

  • Profile Image
    abajan
    Answered on July 22, 2013 at 06:53 PM

    @krecicki

    Please use the code at this link in the HTML field and let us know if it helps.

    Incidentally, there's another issue related to the form. I've provided the solution in this other thread.

    Thanks.

  • Profile Image
    jefreylandicho
    Answered on July 22, 2013 at 07:02 PM

    In the image you have provided, you are using the html source to view the code and not the HTML icon. The code is located in the HTML at the top. To access it, click the HTML icon.

  • Profile Image
    krecicki
    Answered on July 22, 2013 at 07:19 PM

    Doh. Thank you guys for the awesome support. I have one more question. It's another topic, hope that gets solved too. I'm actually able to build a drag a drop form based website with this cloud software. Great product.

  • Profile Image
    jefreylandicho
    Answered on July 22, 2013 at 07:28 PM

    You are very much welcome. Please create a separate thread for that question and we will gladly assist you.