Embed on your website

Add an interactive Clipform to any website. Visitors can watch videos and respond directly on your page - no redirects, no popups.

Quick start

Paste this wherever you want the form to appear:

<div data-embed-id="YOUR_SHARE_ID"></div>
<script src="https://www.clipform.io/embed.js"></script>

Replace YOUR_SHARE_ID with your form's share ID - this is the code at the end of your share link (e.g. the abc123 part of clipform.io/abc123).

That's it. The form renders as a 9:16 vertical video player that fills the container width.

Sizing

The embed fills 100% of its container's width and maintains a 9:16 aspect ratio. You control the container, the embed fills it.

	Value
Aspect ratio	9:16 (portrait)
Minimum size	375 x 667px (iPhone SE)
Maximum size	No limit - maintain 9:16

To control the size, set the width on the parent element:

<div style="max-width: 400px; margin: 0 auto;">
  <div data-embed-id="YOUR_SHARE_ID"></div>
</div>

When you pass an explicit height via the JavaScript API, the aspect ratio is bypassed and the embed uses your value exactly. This is useful when embedding inside a fixed-size container:

VidMaster.embed({
  formId: 'YOUR_SHARE_ID',
  container: '#my-form',
  height: '780px',
  autoResize: false,
});

Responsive layout

On mobile, the form looks best when it fills the full screen width with no side padding or decorative borders. On desktop, you can wrap it in a frame or add padding. A common pattern:

<style>
  .form-wrapper {
    width: 100%;
    aspect-ratio: 9 / 16;
  }
 
  @media (min-width: 640px) {
    .form-wrapper {
      max-width: 420px;
      margin: 0 auto;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    }
  }
</style>
 
<div class="form-wrapper">
  <div data-embed-id="YOUR_SHARE_ID"></div>
</div>

Below 640px the form goes edge-to-edge. Above 640px it gets a centered frame with rounded corners.

Preventing layout shift

The embed automatically holds its space on your page while the form loads, so surrounding content doesn't jump around.

By default, the embed fetches a thumbnail of the first question and displays it as a poster with a play button while the interactive form loads behind it. Visitors see content immediately and know the embed is interactive. When they click play, the form crossfades in - if it has already loaded, playback starts instantly; if it's still loading, the Clipform loading screen appears briefly before the form starts.

To provide your own poster image (skipping the auto-fetch), use the data-embed-poster attribute:

<div
  data-embed-id="YOUR_SHARE_ID"
  data-embed-poster="https://example.com/my-thumbnail.jpg"
></div>

To disable the poster entirely, set data-embed-poster="false". The embed will fall back to a transparent placeholder.

JavaScript API

For more control, use the JavaScript API instead of data attributes:

<div id="my-form"></div>
<script src="https://www.clipform.io/embed.js"></script>
<script>
  VidMaster.embed({
    formId: 'YOUR_SHARE_ID',
    container: '#my-form',
    onComplete: function(data) {
      console.log('Form completed:', data.formId);
    }
  });
</script>

Options

Option	Type	Default	Description
`formId`	string	required	Your form's share ID
`container`	string	required	CSS selector for the container element
`width`	string	`'100%'`	CSS width for the iframe
`height`	string	`'auto'`	CSS height. When set, overrides the default 9:16 aspect ratio and minimum height
`title`	string	`'Embedded form'`	Accessible label for the iframe (screen readers)
`poster`	string \| false	auto-fetched	Thumbnail URL shown while the form loads. Set to `false` to disable
`backgroundColor`	string	`'transparent'`	Fallback background when no poster is available
`borderRadius`	string	`'8px'`	Corner rounding
`autoResize`	boolean	`true`	Auto-adjust iframe height to content
`onLoad`	function	-	Called when the form finishes loading
`onComplete`	function	-	Called when a respondent submits the form

Events

The embed communicates with your page via the onComplete callback. The callback receives an object with:

Field	Type	Description
`formId`	string	The form's ID
`type`	string	Always `'form-complete'`

Troubleshooting

Form not loading

Check that the share ID is correct (9-character hex string)
Make sure the form is set to Live in the dashboard
Check browser console for errors

Form appears but video won't play

Embedded forms use click-to-play. The respondent must click the play button to start.

Content is clipped

By default the embed enforces a minimum height of 667px. Make sure your container allows enough vertical space. If you're embedding inside a fixed-height container, pass an explicit height option so the embed fills your container instead of enforcing its own minimum.

Camera/microphone not working

The embed iframe includes allow="camera; microphone" permissions. If your site has a strict Content Security Policy, you may need to add camera and microphone to your permissions-policy header.

On this page