How to make YouTube Widget larger?

  • Profile Image
    ExecTech
    Asked on August 29, 2017 at 11:34 AM

    I want to make my YouTube video three times larger than it is now:

    https://form.jotform.com/72047005633953 

     

    I know the YouTube widget can get larger, but only if my form's margins are larger. However, I can't seem to get it to work for me.

    Can you set up a demo showing this video three times larger than in my current form?

    https://youtu.be/IR6U2AHeqS4

     

    Thanks

  • Profile Image
    Chriistian
    Answered on August 29, 2017 at 12:13 PM

    To make your youtube video widget larger you will need first to increase the width of your form. To increase form width of the form, just click on the Designer button.

     

    Go to Style Tab and adjust Form Width option.

    Then add/inject this custom CSS code to your form.

    #customFieldFrame_6 {

     width:900px !important;

     height:630px !important;

     max-width:920px !important;

    }

     

    To add/inject custom CSS code on your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes.

  • Profile Image
    ExecTech
    Answered on August 30, 2017 at 01:43 AM
    OK. Can you send me a link to a demo showing this works?

    ...
  • Profile Image
    Nik_C
    Answered on August 30, 2017 at 02:55 AM

    There is another way to increase the width of the YouTube video:

    And here is the cloned version of your form so you can check:

    https://form.jotformpro.com/72411358751960

    Let us know how it worked.

    Thank you!

  • Profile Image
    ExecTech
    Answered on August 30, 2017 at 03:43 PM
    Thanks!

    New problem: When I preview the form, it says the video is not available.

    https://youtu.be/IR6U2AHeqS4

    https://form.jotformpro.com/72047005633953

    Mike


    ...
  • Profile Image
    ExecTech
    Answered on August 30, 2017 at 03:43 PM
    Oops, the YouTube video is https://youtu.be/yIA9QB5kY3U


    ...
  • Profile Image
    Chriistian
    Answered on August 30, 2017 at 03:53 PM

    I checked your form (http://www.jotformpro.com/form/72047005633953) and I was able to see the issue you are reporting. 

    However, when I try to clone the form, the cloned form seems to be working fine. Here is my cloned form: https://form.jotformpro.com/72416122879965. Can you try to remove the widget and add it again and see if this will fix the issue? Please also try to clear your form cache after updating the form and see if this will help. Here is a guide on clearing your form cache: How to Clear your Form Cache.

  • Profile Image
    ExecTech
    Answered on August 30, 2017 at 04:44 PM
    Thanks for the fast reply.

    I removed the widget and set up a new one. I changed the width to 900 and the height to 630. I also cleared the cache.

    In preview, the new widget shows the video now, but the size is wrong.

    https://www.jotform.com/build/72047005633953#preview


    ...
  • Profile Image
    TREVON
    Answered on August 30, 2017 at 05:36 PM

    When you changed the youtube element it changed the youtube #div you were referring to with the injected CSS.

    Kindly Replace

    #customFieldFrame_6 {

     width:900px !important;

     height:630px !important;

     max-width:920px !important;

    }

    With

    #customFieldFrame_73 {
        width : 900px !important;
        height : 630px !important;
        max-width : 920px !important;
        margin-left: -35px;
    }

    To Inject CSS code kindly follow guide below:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

  • Profile Image
    ExecTech
    Answered on August 30, 2017 at 06:43 PM
    Thanks!

    ...
  • Profile Image
    ExecTech
    Answered on August 31, 2017 at 04:43 PM
    Hi,

    I replaced the youtube element again and the video screen size does not work in the preview.

    How do I find the field frame number? I went to Conditions and saw id83, so I changed the CSS to #customFieldFrame_83 {

    But that didn’t fix the problem.

    Thanks,

    Mike

    ...
  • Profile Image
    EltonCris
    Answered on August 31, 2017 at 05:22 PM

    The #customFieldFrame_83 selector is correct if you are referring to the first video on your form https://form.jotformpro.com/72047005633953.

    I fixed it for you anyway. Kindly check.

  • Profile Image
    ExecTech
    Answered on August 31, 2017 at 05:43 PM
    I thought I had done that already.

    OK, thanks.

    ...