WEBFLOW INTEGRATION

Drop in the player.
Keep the real ratio.

Add the generated iframe to a Code Embed element, publish to staging, approve that hostname, and then repeat the domain check before the custom domain goes live.

Requirements

Webflow currently makes Code Embed available with a Core, Growth, Agency or Freelancer Workspace, or on a site with an active Site plan. The iframe itself needs no additional Webflow script.

Copy the complete responsive iframe from the Visiroll video’s Share tab. Do not paste only its player URL into Webflow’s native Video element.

Add the player

Copy the iframe in Visiroll.Confirm the video is Ready and selected for the destination website under Published on.
Add a Code Embed.Open Webflow’s Add panel, place a Code Embed element on the canvas, and open its code editor.
Paste and save.Paste the complete iframe. Do not wrap it in <html>, <head> or <body> tags.
Publish and test.Some custom code only behaves fully on a published site. Test both the staging and custom-domain URLs at mobile and desktop widths.

<iframe src="https://visiroll.com/v/VIDEO_ID" title="Campaign video" width="1920" height="1080" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy" style="border:0;aspect-ratio:1920/1080;width:100%;height:auto;background:#070908"></iframe>

Staging and production domains

Add the exact your-project.webflow.io staging hostname to the Visiroll website’s allowed domains before testing. Before launch, add the custom hostname too. If both www.example.com and example.com can render a page, approve both or enforce one canonical redirect.

A successful Designer preview does not prove that the published hostname is approved. Validate the published page and then check Visiroll analytics after a qualified playback.

Reuse with components or CMS

For a reusable static player, Webflow can turn the Code Embed into a component. For CMS pages, Webflow supports dynamic references inside Code Embeds. Keep one complete iframe per rendered video and make sure each Visiroll video is published to the destination website.

If you add the optional Visiroll Player API, load https://visiroll.com/player.js once before </body> or inside the relevant Code Embed. The basic iframe workflow does not need it.

Troubleshooting

Only a placeholder appears in Designer

Publish or use Webflow Preview. Custom script behavior may not run directly on the design canvas.

Playback is refused

Add the current webflow.io or custom hostname in Visiroll and confirm the video is published to the same website.

The player has the wrong height

Remove fixed height rules from the Code Embed or its wrapper. Keep Visiroll’s generated width, height and aspect-ratio.

Fullscreen or API controls fail

Keep the iframe’s permission attributes. For the API, load player.js and target the iframe element after it exists in the page.

Platform referencesWebflow: Custom code embed Webflow: dynamic embeds

Before publishing, use the video embed performance checklist.