How can I embed iFrame code from a Collection onto my Webflow site?
TL;DR
- Add an Embed or Plain Text field to your CMS Collection and paste the iFrame code into it.
- Use a Collection Page or List and place an Embed element where you bind the CMS field containing the iFrame code.
- Save, publish, and optionally use custom CSS to ensure the iFrame is responsive.
To embed iFrame code from a CMS Collection onto your Webflow site, you’ll use a Dynamic Embed component within a Collection List or Template Page.
1. Add an Embed Field to Your CMS Collection
- Go to CMS in your Webflow project and edit the Collection where you want to store the iFrame code.
- Add a new field of type "Embed" or "Plain Text" (use "Plain Text" if you're pasting raw iFrame strings; use "Embed" if you're storing actual iframe embeds you’ll bind later).
- Paste your iFrame embed code (e.g., from YouTube, Calendly, etc.) into the new field.
- Save the Collection and publish your updates.
2. Use a Collection Page or Collection List
- Create a Collection Page, or drag a Collection List onto a static page and bind it to your CMS Collection.
- Inside that Collection List or Page, place an Embed element from the Add panel.
3. Bind CMS Embed Code to the Embed Element
- Inside the Embed element, use Webflow's dynamic binding like this:
Example: <div>{Your CMS field}</div>
- Replace
{Your CMS field}with the Add Field (+) button inside the Embed dialog. - This injects the iFrame code stored in each Collection item dynamically.
- For pure iFrames, just insert the CMS field directly (no wrapper
<div>if not required) like:
{ {wf {"path":"iframe-field-name","type":"PlainText"} } }
- Click Save & Close, then Publish your site to see the embedded content live.
4. Configure Responsiveness (Optional)
- If your iFrame isn’t responsive, wrap it in a div with a set aspect ratio using custom CSS classes.
- Use CSS rules via Webflow’s Custom Code area (in Page Settings or Site Settings) to control width, height, or responsiveness as needed.
Summary
To embed iFrame code from a CMS Collection in Webflow, store the iFrame in a CMS text or embed field, then use a Dynamic Embed element to inject it into your site via binding. This ensures each Collection item displays its own embedded content properly.