How to make YouTube Widget larger?

  • TipsForSuccess
    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?

     

    Thanks

  • Chriistian Jotform Support
    Replied 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.

    How to make YouTube Widget larger? Image 1 Screenshot 30

     

    Go to Style Tab and adjust Form Width option.

    How to make YouTube Widget larger? Image 2 Screenshot 41

    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.

  • TipsForSuccess
    Replied on August 30, 2017 at 1:43 AM
    OK. Can you send me a link to a demo showing this works?

    ...
  • Nik_C
    Replied on August 30, 2017 at 2:55 AM

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

    How to make YouTube Widget larger? Image 1 Screenshot 20

    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!

  • TipsForSuccess
    Replied on August 30, 2017 at 3:43 PM
    Thanks!

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

    https://www.youtube.com/watch?v=IR6U2AHeqS4

    https://form.jotformpro.com/72047005633953

    Mike


    ...
  • TipsForSuccess
    Replied on August 30, 2017 at 3:43 PM
    Oops, the YouTube video is https://www.youtube.com/watch?v=yIA9QB5kY3U


    ...
  • Chriistian Jotform Support
    Replied on August 30, 2017 at 3:53 PM

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

    How to make YouTube Widget larger? Image 1 Screenshot 20

    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.

  • TipsForSuccess
    Replied on August 30, 2017 at 4: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


    ...
  • TREVON
    Replied on August 30, 2017 at 5: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

     

  • TipsForSuccess
    Replied on August 30, 2017 at 6:43 PM
    Thanks!

    ...
  • TipsForSuccess
    Replied on August 31, 2017 at 4: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

    ...
  • Elton Support Team Lead
    Replied on August 31, 2017 at 5: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.

    How to make YouTube Widget larger? Image 1 Screenshot 20

  • TipsForSuccess
    Replied on August 31, 2017 at 5:43 PM
    I thought I had done that already.

    OK, thanks.

    ...