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). -
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.
Note: Do not include <html>, <head>, or <body> tags—only paste the snippet Vidalytics provided.
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.