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.


  • Profile Image

    How can I set my video to reduce for mobile?

    Asked by angiehills on April 18, 2014 at 05:38 PM

    Can I set a css code to reduce my video for mobile?

    http://form.jotformpro.com/form/41066720474957

    Page URL:
    http://form.jotformpro.com/form/41066720474957

    video Mobile css code
  • Profile Image
    JotForm Support

    Answered by jonathan on April 18, 2014 at 07:33 PM

    Hi,

    If you meant the Youtube widget embeded dimension, it has a dimesion property (width, height) that you can set to resize the embedded video on the form.

    Please refer to the image below how to do this

     

    here is a test form where I tested this http://form.jotform.me/form/41077073737457?

    Please take note that you can resize the widget's dimension, but it will not be able to override the minimum resolution of the video embedded. If you noticed on my test form, the video content will not resize anymore since its minimum resolution is about 144.

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

     

  • Profile Image

    Answered by angiehills on April 18, 2014 at 07:46 PM

    Is there a way to make it Responsive? I've had images in forms before & created a css code (given to me by jotform support) to leave image full size & reduce/responsive on mobile.

    Can I do the video the same way? Leave it large as is for desktop & have it responsive for mobile?

  • Profile Image
    JotForm Support

    Answered by jonathan on April 18, 2014 at 08:38 PM

    Hi,

    You can instead embed the video within an iframe code using the TEXT field(found in Form Tools)

     

    when you do this, you will now be able to use the field to when Injecting CSS code to make the form mobile responsive.

    You may want to review this thread also for details on how to make the form mobile responsive

    In your form you can start with CSS code like this

     

    /*-----------RESPONSIVE LAYOUT-----------*/@media (max-width: 480px) {.form-textarea,.form-textbox,.form-dropdown,

    .form-html

    {width: 100% !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.form-label-left, .form-label-right{width: auto;}.form-buttons-wrapper{margin-left:0 !important;}.form-input {width: 100%;}.form-all{width: 75%;}.form-sub-label-container {width: 100%;display:block;}}

     

    Here is a cloned version of your form http://www.jotformpro.com/form/41077816914964 where I have used the TEXT field to embed the video and then injected the CSS code I mentioned.

    You can try test viewing the form in your mobile device.

    Hope this help. Inform us if you need further assistance.

    Thanks!

     

     

  • Profile Image

    Answered by angiehills on April 19, 2014 at 01:13 PM

    When I click on your cloned version - on my desktop - the video is already very small.

    When I copy & apply your css provided - and try mine on my desktop & shirnk browswer window - the text on form is reducing but the video still doesn't appear to shrink for me.

    http://form.jotformpro.com/form/41068671357964

  • Profile Image
    JotForm Support

    Answered by jonathan on April 19, 2014 at 05:47 PM

    Hi,

    In my cloned version, I had the iframe height of the embedded video smaller than what you had -- this is the reason it looks small already on your desktop.

    Anyway, I also realized that the embedded youtube video is still not responsive on mobile when I tested it again.

    So I made the adjustments. Please follow this steps.

    1. Modify the TEXT(HTML) field of the youtube iframe embed video to like this http://pastie.org/9094150

     

    2. Remove all the previous injected CSS codes and use this http://pastie.org/9094181

    If OK with you, you can just clone my form http://www.jotformpro.com/form/41087012170947 so that you have a copy of it on your account. 

    Use this guide to clone -How-to-Clone-an-Existing-Form-from-a-URL

    I tested it on a mobile device simulator and it behave like this

     

    Hope this works for you. Inform us if still not.

    Thanks!


     

     

  • Profile Image

    Answered by angiehills on April 25, 2014 at 09:53 PM

    I tried following your directions & not cloning as I have a few different versions of this - so wanted to edit each one.

    But - it still doesn't seem to be working fo me.

    Can you please check & see if I edited it correcly per your instructions.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by NeilVicente on April 26, 2014 at 06:04 AM

    Hi,

    Jonathan's solution works on devices with limited static viewport (i.e., mobile devices). It will not make the video responsive to the point that it will react on shrinking browsers.

    According to my tests so far, it is quite impossible to make the video as responsive as you want, but I probably need to do more tests.

    In the meantime, try viewing the form on a mobile device (phone or tablet) and you'll find that the video is resized to fit the screen.

  • Profile Image

    Answered by angiehills on April 26, 2014 at 08:31 PM

    I'm trying on my mobile phone & the video doesn't seem to shrink for me. I have multiple forms that I'm trying to get this on.

    http://www.jotform.com//?formID=41086118320950

    http://www.jotform.com//?formID=41066720474957

    http://www.jotform.com//?formID=41068671357964

    Any help would be appreciated - Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 26, 2014 at 10:57 PM

    Hi,

    I checked the 1st form https://www.jotform.com/41066720474957 we had been working on the discussion, and I noted that you had not applied my suggested TEXT(html) code in embedding the youtube video. This code http://pastie.org/9094150

    This was my step

    1. Modify the TEXT(HTML) field of the youtube iframe embed video to like this http://pastie.org/9094150

     

    --

    Will you give me permission to access and modify your form so that I can try to apply this workaround instead?

    So far, that is the difference I see between my form and your form, the reason your form embedded video is not responsive when viewed on mobile browser.

     

    Will wait for your update.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 26, 2014 at 11:11 PM

    Correction:

    Please disregard the last part of my latest response.. because, I just realized that you wanted to do it yourself, so I should not do it for you.

    What I suggest you can do this time is clone my test form as I've suggested much earlier

    If OK with you, you can just clone my form http://www.jotformpro.com/form/41087012170947 so that you have a copy of it on your account. 

    Use this guide to clone -How-to-Clone-an-Existing-Form-from-a-URL

    --

    Clone the my form so that at least you will be able to open the actual form and see for yourself what had been setup and configured on the form.

    Inform us if you have further question.

    Thanks!

  • Profile Image

    Answered by angiehills on April 27, 2014 at 07:53 PM

    I did try adding your text - but I hit the edit HTML box in the text box & the html at the bottom right of the wysiwyg editor. But it seems it didn't save? So - I have cloned yours & have tried placing the html as you did in your image & as far as I can tell I have the correct info.

    On my phone - it looks like 2 of my forms are reducing for mobile - they are the same form, but a diff video.

    http://form.jotformpro.com/form/41066720474957

    But it seems the 2nd two with the original video in your clone - is still not reducing on my mobile? I tried to refresh my mobile to make sure it wasn't an old view in my memory - but it still doesn't seem to work on these two:
    I have tried to re-copy both of your edits into both of these forms - but still not correct.
    Can you please assist? :)
    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on April 27, 2014 at 08:52 PM

    Hi,

    I went ahead and fix the problem with the 2 remaining forms that was not working

    http://form.jotformpro.com/form/41068671357964

    http://form.jotformpro.com/form/41086118320950

     

    One thing I noticed that seems to fail on the 2 remaining form was the protocol used in the youtube link. It seems youtube wants the URL to always used https only.

    I updated this in the TEXT(html) where the video was embedded for the 2 forms, and they become mobile responsive when I test

     

    You may check the 2 forms again on your mobile device to see if they display properly now.

    Inform us if there are further issue.

    Thanks!

  • Profile Image

    Answered by angiehills on April 27, 2014 at 09:31 PM

    Awesome! Thank you so much for your assistance! Greatly appreciated!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 28, 2014 at 12:08 AM

    Hello angiehills,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by NGHS on August 27, 2015 at 02:51 PM

    For the folks wanting a one-post solution, here is what I did. Use the below HTML and CSS for extreme happiness. Enjoy!

     

    HTML:

    <div class="item-video"><iframe frameborder="0" src="https://www.youtube.com/embed/n0g9K_C2C2c" width="100%" height="360" alt="" /></iframe></div>

     

    CSS:

    @media screen 

      and (min-device-width: 800px) 

      {

    .item-video {

        width : 100%!important;

        font-size : 12px!important;

        height : 0px!important;

        padding-bottom : 56.1%!important;

        position : relative!important;

    }

    .item-video iframe {

        width : 100%!important;

        height : 100%!important;

        position : absolute!important;

    }

    }