Webflow Integration

Embed Zidi videos in your Webflow sites using the Embed element.

How to Embed

1. Open your video in Zidi and click Share.
2. Copy the embed code (iframe snippet).
3. In the Webflow Designer, add an Embed element from the Add panel (shortcut: A).
4. Paste the embed code into the code editor.
5. Click Save & Close.
6. Publish your site to see the video live.

Embed Code

<iframe
  src="https://app.zidi.ai/v/your-video-slug"
  width="100%"
  height="400"
  frameborder="0"
  allowfullscreen
  style="border: none; border-radius: 8px;"
></iframe>

Responsive Embed

For responsive behavior, wrap the iframe in a styled container:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://app.zidi.ai/v/your-video-slug"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 8px;"
    allowfullscreen
  ></iframe>
</div>

Alternatively, set the Embed element's width to 100% in the Webflow style panel and use a fixed aspect ratio.

CMS Collections

To embed different videos on CMS-powered pages:

1. Add a Plain Text field to your collection for the video slug.
2. Use an Embed element with a dynamic reference to construct the iframe URL.

Tips

• The Embed element only renders on the published site — use Preview mode to test.
• Password-protected videos show a password prompt in the embed.
• Add tracking pixels for analytics on embedded views.
• CTAs and engagement tracking work inside embedded videos.