Embed video inside a form

[ben-duchy]

Hello, I just wondered if anyone has ever managed to embed a video inside a HubSpot form?

I've been tasked with creating a business induction page with a form. One of the questions will ask if the new starter is aware of the company Health and Safety policy and if they select no, then a video appears.

I've tried using a text box and inserting html but it doens't work -
"you inserted unsafe html" is displayed

I've looked at using external forms such as Jotform but would prefer to stick with HubSpot where possible.

Thanks

[dbeau79]

@ben-duchy , sorry. it was from my sandbox.  forgot you can't share those links.  give it a shot though and paste a link if it doesn't work.  we'll figure it out.

[dbeau79]

@ben-duchy , i have it working here: http://hubspot-developers-1bewsw5-8258648.hs-sites.com/-temporary-slug-0574649b-b5f9-43a4-b976-1cd1e... ... are you seeing any console errors?  I'm thinking you might need to wrap the javascript in {% require_js %}{% end_require_js %} or maybe you didn't update the input name properly.  Here is the code from my custom module:

<div id="video-source" style="display: none;">
  {{ module.richtext_field }}
</div>
{% require_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script>
window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       $(function() {
         $('select[name="show_video"]').change(function() {
           // get the NAME-OF-FIELD by inspecting the selecting the select element in inspector.
           if ($(this).val().toLowerCase() == 'no') {
             $('#video-target').html($('#video-source').html());
           }
         });
         // or do it with vanilla js if you're not into the whole brevity thing.
       });
   }
});
</script>
{% end_require_js %}

You'll need to add the rich text field to the module where you will input the video in the page editor.

Also, in your form builder add this to a rich text form field: 

<div id="video-target">&nbsp;</div>

Here's my select field (from inspector).  Note the value in the "name" attribute of "show_video".  Yours will be different so grab the value from yours and insert into the selector in in the code above here "select[name="CHANGE-THIS"]

<select id="show_video-c086661a-8199-4488-824b-1914229e3ae1_216" class="hs-input" name="show_video" data-reactid=".hbspt-forms-0.1:$1.$show_video.0"><option value="" disabled="" selected="" data-reactid=".hbspt-forms-0.1:$1.$show_video.0.0">Please Select</option><option value="Yes" data-reactid=".hbspt-forms-0.1:$1.$show_video.0.1:$Yes">Yes</option><option value="No" data-reactid=".hbspt-forms-0.1:$1.$show_video.0.1:$No">No</option></select>

If it's still not working, share a link.

[ben-duchy]

Hi @dbeau79 , the link takes me to a login page which doesn't seem to work... I'm not having much luck today!

To be honest, this goes way beyond my knowledge, but I will give it a go.

[ben-duchy]

@dennisedson, that made me laugh. I do need to change it, but I've had it for so long that it's become a part of me 😂

@dbeau79 an interesting idea, thanks. I will give it a go, but I assume the video (assuming it works) will appear outside the form? My employer wants the video to appear within the form, directly underneath that particular question, in the same way as a conditional hidden field. I'll let you know how I get on.

[dbeau79]

@ben-duchy , no the video should appear inside the form.  In the text box within the form where you were trying to embed the video (from your screenshot) you will instead add that <div id="video-target"></div> element.  Via the js I put down, the video from the other module will get inserted into that div when the select field is changed AND the answer is "no".  I'm also thinking you should and an "else" statement to that so if the answer is "yes" it removes the video.  Or maybe you want to leave it?  The custom module with the video in it won't actually display the video.  That should be hidden.

[ben-duchy]

@dbeau79 unfortunately I couldn't get it to work, but I love your thinking and reckon you're on the right lines.

If you manage to figure it out, please share. I think a lot of people will utilise this feature.

[dbeau79]

@ben-duchy 

I would drop this empty div in the text box (if it's allowed...you may have to throw in a &nbsp;) like this: <div id="video-target"></div>

Add a custom module with the video in it and wrap it with <div id="video-source"><!-- video code goes here --></div>

Then add this js

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       $(function() {
         $('select[name="NAME-OF-FIELD"]').change(function() {
           // get the NAME-OF-FIELD by inspecting the selecting the select element in inspector.
           if ($(this).val().toLowerCase() == 'no') {
             $('#video-target').html($('#video-source').html());
           }
         });
         // or do it with vanilla js if you're not into the whole brevity thing.
       });
   }
});

I am a little concerned that there's a reson HubSpot isn't letting you add the video directly.  Wondering if it interferes with the submission.  Another alternative would be to put the video in a lightbox and pop it open with an element in the form field text box.

[dennisedson]

@ben-duchy , my favorite gorilla 🤣

This is a pretty fun question and I am intrigued what the answer might be.  Going out on a limb that you won't be able to accomplish this via traditional means.

@dbeau79 , @piersg , @Kevin-C !  I challenge you to make my chin drop to the ground in awe with your solutions.