Learn our powerful, seamless method to display your private Vimeo video instantly and securely on the same page the moment the HubSpot form is submitted.

Last updated: 7 Nov 2025

Reading time: 6 minutes

Hosting your videos on Vimeo is a great option, since there are no ads, and you can control where your content is watched (e.g., only on your website).

If you host your own website, and you’re using HubSpot for lead capture, this article will show you how you can gate protect your premium video content on the same page the moment the HubSpot form is submitted.

This single-page solution reduces friction, elevates user experience (UX), and maximizes your conversion rate.

If you find this article a bit too technical, we can help. Just reach out to us via our contact form.

The Workflow

  1. Display the HubSpot form on a screenshot of the video (to pique the customer’s interest)
  2. On successful submission, generate the video code and replace the thumbnail with the video.

Solution requirements

  1. Do not display the video code until the form has been successfully submitted.
  2. This solution has to work on mobile and desktop devices.

Step 1: Build and Configure the HubSpot form

For the purposes of this article, I created a simple form that asks for name and email. Please ensure that you configure all the privacy laws that apply to your organisation.

HubSpot menu showing Forms link

InHIn HubSpot, using the left menu, visit Marketing > Forms, and create form.

For this example, I used mostly default settings.

HubSpot form creator

Create your form, and then select the On submit container (that says Thank you!). This opens the left options pane.

Ensure that the Show thank you message is selected.

Hubspot on submit form settings

Step 2: Get HubSpot embed code

Once your form is published, copy the embed code.

We will be using 3 values from your embed code:

  1. data-region
    (the data centre you’re submitting data to – remains the same for all forms)
  2. data-form-id
    (form id – different for each forms)
  3. data-portal-id
    (your account id – remains the same for all forms)

Step 3: Get Vimeo video URL

We’ll be using the Vimeo URL from your browser.

It will look something like this:
https://vimeo.com/0123456789/az12345a01
or
https://vimeo.com/9011932 (one of their sample videos)

Step 4: Add the code

On the page where you’d like the video and form to display, add the code below. If you’re using WordPress, you can use the Gutenberg Code block, or a similar element that is packaged with your theme.

Copy the code below into the page you where you want the form and video to display, and find/replace:

  • eu1 with your HubSpot data-region
  • 2715abc0-3420-4b7a-a90a-0ac6c11d27ea with your HubSpot data-form-id.
  • 2715abc034204b7aa90a0ac6c11d27ea with your HubSpot data-form-id but with the dashes removed.
  • XXXX12345 with your HubSpot data-portal-id
  • https://vimeo.com/9011932 with your Vimeo video URL

I added some basic CSS for this example, but depending on your theme, you may want to alter this.

Code explanation

HubSpot embed code and callback

This is the developer’s version of embedding a form, which gives you granular control over callbacks. We’re using onFormSubmitted, which fires only after the form has been successfully submitted to HubSpot.

hbspt.forms.create({
    region: "eu1", // HubSpot data-region
    formId: "2715abc0-3420-4b7a-a90a-0ac6c11d27ea", // HubSpot data-form-id
    portalId: "XXXX12345", // HubSpot data-portal-id
    onFormSubmitted: function () {
        document.getElementById('2715abc0-3420-4b7a-a90a-0ac6c11d27ea-video').innerHTML = unescape(videoEmbed2715abc034204b7aa90a0ac6c11d27ea.html);
    }
});

Vimeo video attributes

I’m using strongly-typed JavaScript variables, which use the formID GUID for reference. Since these are at the top level of the document, this avoids any potential clashes with other scripts.

The first section sets up the video variables (this is the section you will update).

The second section generates the Vimeo script function that loads the video metadata. You can read more in Vimeo’s oembed developer documentation here.

The first function sets the video thumbnail as background, and the second function replaces the form HTML with the video embed code (upon successful submission).

// Set up unique variables for your video
var videoEmbed2715abc034204b7aa90a0ac6c11d27ea = {
    url: 'https://vimeo.com/9011932', // Vimeo URL
    id: 'hbspt-form-2715abc0-3420-4b7a-a90a-0ac6c11d27ea',
    functionID: 'embedVideo2715abc034204b7aa90a0ac6c11d27ea'
}
// Generate the Vimeo script 
// https://developer.vimeo.com/api/oembed/videos
var js2715abc034204b7aa90a0ac6c11d27ea = document.createElement('script');
js2715abc034204b7aa90a0ac6c11d27ea.setAttribute('type', 'text/javascript');
js2715abc034204b7aa90a0ac6c11d27ea.setAttribute('src', 'https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoEmbed2715abc034204b7aa90a0ac6c11d27ea.url) + '&callback=' + videoEmbed2715abc034204b7aa90a0ac6c11d27ea.functionID + '&autoplay=true&width=1920');
document.getElementById("2715abc0-3420-4b7a-a90a-0ac6c11d27ea-video").append(js2715abc034204b7aa90a0ac6c11d27ea);

// The function that displays the video preview with playbutton overlay
function embedVideo2715abc034204b7aa90a0ac6c11d27ea(video) {
    document.getElementById('2715abc0-3420-4b7a-a90a-0ac6c11d27ea-video').style.backgroundImage = "url('" + video.thumbnail_url_with_play_button + "')";
    videoEmbed2715abc034204b7aa90a0ac6c11d27ea.html = video.html;
}

// The function that swaps the form with video HTML on successful submission
function embedVideo2715abc034204b7aa90a0ac6c11d27ea_play() {
    // Swap form HTML with video code HTML
    document.getElementById('2715abc0-3420-4b7a-a90a-0ac6c11d27ea-video').innerHTML = unescape(videoEmbed2715abc034204b7aa90a0ac6c11d27ea.html);
}

Final thoughts

This is a technical implementation, and the code assumes that all data has been entered correctly (it does not currently do any error checks).

If multiple of these will be used on a site, it may also be wise worth creating a plugin or shortcode that only requires the necessary attributes and generates the rest of the code automatically.

I hope you found this helpful, and if you require help with your implementation, please contact us.

About the Author: Stephan

With 20 years of industry experience as a UX specialist, designer and developer, I enjoy teaching and sharing insights about UX, accessibility and best practices for e-commerce and the web.

Table of contents

Article topics

Custom applications
Technical Articles

Author: Stephan

Topics

Related insights