The Best Way to Embed Videos in Dubsado Forms

Adding videos to your Dubsado forms is a great way to engage leads and clients. Whether you're embedding a YouTube tutorial, a Vimeo showcase, or even a custom-hosted video, ensuring proper formatting will improve responsiveness, playback, and accessibility. This guide will walk you through embedding videos into Dubsado forms with the best settings for a seamless experience.

Embedding YouTube Videos in Dubsado Forms

When embedding YouTube videos into your Dubsado forms, use the correct embed link by following these steps:

1. Go to the YouTube video you want to embed.

2. Click Share → Embed.

3. Copy the URL that appears after <iframe... src=".

4. Paste the copied URL into the embed code below, replacing VIDEOLINK.

Optimized YouTube Embed Code for Dubsado

<div id="dubinsEmbedContainer">
    <iframe
        src="VIDEOLINK?autoplay=1&loop=1&mute=1"
        frameborder="0"
        allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
        allowfullscreen
        title="YouTube Video"
    ></iframe>
</div>

<style>
 #dubinsEmbedContainer {
     position: relative;
     width: 100%;
     max-width: 800px; /* Use 100% if you want the video to take up the width of your Container */
     margin: auto;
     overflow: hidden;
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
 #dubinsEmbedContainer iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
}
</style>

Copy to clipboard

Looking for a more advanced testimonial slider where you can add several quotes all in one plugin? Check out our Testimonial Slider using Genie 4.0!

Why This Code Works for Dubsado Forms

✅ Responsive design: The video maintains a 16:9 aspect ratio within the form. ✅ Autoplay & loop options: The video starts playing automatically and loops (optional). ✅ Muted autoplay: Ensures autoplay works without browser restrictions. ✅ Screen-reader friendly: The title attribute enhances accessibility. ✅ Enhanced permissions: encrypted-media allows DRM content, and picture-in-picture enables multitasking.

Embedding Vimeo Videos in Dubsado Forms

For Vimeo videos, follow a similar process:

1. Click Share on your Vimeo video.

2. Copy the embed URL.

3. Replace VIDEOLINK in the following code:

Optimized Vimeo Embed Code

<div id="dubinsEmbedContainer">
    <iframe
        src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&autopause=0&muted=1"
        frameborder="0"
        allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
        allowfullscreen
        title="Vimeo Video"
    ></iframe>
</div>

<style>
 #dubinsEmbedContainer {
     position: relative;
     width: 100%;
     max-width: 800px; /* Use 100% if you want the video to take up the width of your Container */
     margin: auto;
     overflow: hidden;
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
 #dubinsEmbedContainer iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
}
</style>

Copy to clipboard

The CSS remains the same as the YouTube embed code to ensure proper display. I went ahead and added in the code above for you to easily copy and paste.

Embedding Self-Hosted Videos in Dubsado Forms

Dubsado does not support direct video file uploads, but you can host your video externally (on your website, Google Drive, Dropbox, or a video-hosting platform) and embed it using the <video> tag.

Optimized Self-Hosted Video Embed Code

<div id="dubinsEmbedContainer">
    <video controls autoplay loop muted>
        <source src="https://yourwebsite.com/your-video.mp4" type="video/mp4">
        <source src="https://yourwebsite.com/your-video.webm" type="video/webm">
        Your browser does not support the video tag.
    </video>
</div>

<style>
 #dubinsEmbedContainer {
     position: relative;
     width: 100%;
     max-width: 800px; /* Use 100% if you want the video to take up the width of your Container */
     margin: auto;
     overflow: hidden;
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
 #dubinsEmbedContainer video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
}
</style>

Copy to clipboard

Note: Make sure the URL you use is publicly accessible so Dubsado can display the video correctly.

Why Use Self-Hosting in Dubsado?

✅ No third-party branding like YouTube or Vimeo. ✅ Full control over playback settings. ✅ Better privacy without tracking or ads.

Where to Use Videos in Dubsado Forms

Embedding videos inside Dubsado forms can enhance:

• Lead capture forms → Welcome video or service overview.

• Proposals → Personalized video pitches.

• Questionnaires → Instructional clips to guide responses.

Final Thoughts

Embedding videos in Dubsado forms enhances engagement while maintaining a professional look. Whether you're using YouTube, Vimeo, or a self-hosted video, following these best practices ensures compatibility, responsiveness, and accessibility.

Pro Tip: You shouldn’t need to tweak the code beyond replacing the video link, but feel free to customize playback settings based on your needs.

Now, go ahead and make your Dubsado forms even more dynamic with embedded videos!

TABLE OF CONTENTS

1. Embedding YouTube Videos

2. Embedding Vimeo Videos

3. Embedding Self-Hosted Videos

4. Where to Use Videos

5. Final Thoughts