Follow these steps to seamlessly add a Vidalytics-hosted video to your Webflow site using Webflow’s Embed element and Vidalytics’ copy-and-paste embed code.
Step 1: Retrieve Your Vidalytics Embed Code
Log into your Vidalytics account.
Navigate to My Vids and open the video you'd like to embed.
Locate the unique Embed Code on the video’s Edit page. Click on Embed/Share option to open the script. This script-based snippet is the one you’ll use to embed the video.
Copy the entire embed script to your clipboard by clicking on copy code.
Step 2: Prepare Your Webflow Project
Ensure you have access to a Custom Code section or Embed component. This is available on Webflow's Site plans (Core and above).
Step 3: Add the Vidalytics Embed in Webflow
In Webflow Designer, open the Add panel (press
A).Drag a Embed element (Custom Code) to the desired location on your page canvas.
Double-click the Embed box or click its settings cog, then paste your Vidalytics embed code in the code editor (includes HTML /
<script>tags).Note: Do not include
<html>,<head>, or<body>tags—only paste the snippet Vidalytics provided.Set the dimensions manually if needed:
Either wrap the embed inside a div block and define its width/height in Webflow styles,
Or add
width="100%" height="100%"attributes inside your embed code snippet.
Click Save & Close to insert the code onto the page.
Step 4: Style and Preview
Use Webflow’s Style panel to adjust width, height, and responsiveness of the container.
Preview your page in Webflow to confirm the video appears correctly in the designer.
Publish your site to ensure the embedded video loads as expected on the live domain.