Webflow makes it easy to embed third-party video players using its built-in Embed element. Follow the steps below to get your Vidalytics video live on your Webflow page in just a few minutes.
Note: Custom code embeds require a Webflow Site plan (Core and above). Make sure your plan includes access to the Embed element before getting started.
Step 1 — Get Your Vidalytics Embed Code
Open your video — log in to your Vidalytics account, go to My Vids, and open the video you want to embed.
Copy the embed code — on the video's settings page, click the Embed/Share option to open the embed panel. Copy the full embed script to your clipboard by clicking Copy Code.
Step 2 — Add the Embed to Webflow
Open the Add panel — in the Webflow Designer, press A to open the Add panel and drag an Embed element (Custom Code) to the desired location on your page canvas.
Paste your embed code — double-click the Embed element or click its settings cog to open the code editor. Paste your Vidalytics embed code directly into the editor.
Important: Only paste the snippet provided by Vidalytics. Do not include <html>, <head>, or <body> tags — the embed element handles those automatically.
Set your dimensions — if you need to control the size of your video, you have two options:
- Wrap the Embed element inside a div block and define its width and height using Webflow's Style panel
- Add
width="100%" height="100%"attributes directly inside your embed code snippet
Save — click Save & Close to insert the embed onto your page.
Step 3 — Style, Preview, and Publish
Preview your page — use Webflow's built-in preview to confirm the video appears correctly on the page canvas.
Adjust styling if needed — use the Style panel to fine-tune the width, height, and responsiveness of the container around your video.
Publish your site — once everything looks right, publish your Webflow site to make the embedded video live on your domain.
Tip: Always check your video on both desktop and mobile after publishing. If you need different sizing for each device, use Webflow's responsive breakpoints to adjust the container dimensions per screen size.
If you have any questions, feedback, or need assistance, feel free to reach out to our Customer Happiness Team at hi@vidalytics.com. 😊