Vidzflow

How to build with Vidzflow and Webflow

Vidzflow provides video hosting with native Webflow integration through three methods: the Vidzflow marketplace app, Webflow's native Video element, and embed code. The marketplace app offers the fastest setup with visual controls for player customization, autoplay settings, and CTA placement. For basic playback without advanced features, Webflow's native Video element accepts Vidzflow URLs directly.

For implementations requiring precise iframe control, copy the pre-generated embed code from the Vidzflow dashboard into a Webflow Code Embed element. This method requires comfort with HTML and CSS. The platform handles performance optimization and tracks views, watch time, completion rates, and CTA click-through rates.

Use the Vidzflow app

The Vidzflow marketplace app installs directly into Webflow and adds a draggable video element to your components panel. After installing the app, upload videos to your Vidzflow dashboard, then drag the Vidzflow element onto any page and select videos from your library. The app automatically converts videos to optimized formats and provides visual controls for player customization without writing code.

You can configure the following through the app:

• Autoplay and playback controls: Toggle autoplay, muting, looping, and playback speed through simple on/off switches  
• Brand customization: Use the color picker to match player controls to your site's design system  
• Interactive CTAs: Add clickable buttons with custom timing, styling, and positioning for sign-ups or sales  
• Lead capture forms: Collect viewer information during playback through embedded forms  
• Video analytics: Track views, watch time, completion rates, and CTA click-through rates with weekly email reports and heatmap analytics

The app manages team collaboration through workspaces where multiple users can access videos across client sites. Find detailed configuration options in the Vidzflow app documentation.

Use Webflow's native Video element

Webflow's native Video element supports Vidzflow video URLs for basic playback without installing additional apps. This method works well when you need straightforward video hosting without custom CTAs, lead forms, or detailed analytics.

To use this method:

1. Get your video URL from the Vidzflow dashboard  
2. Drag Webflow's native Video element from the Add panel onto your canvas  
3. Paste the Vidzflow URL into the video source field in the element settings  
4. Use Webflow's visual sizing controls to adjust dimensions and responsive behavior

This method provides simple visual sizing controls, requires no app installation, and works with Webflow's native responsive settings. However, it doesn't provide access to Vidzflow-specific features such as custom CTAs, lead-capture forms, or engagement analytics. For advanced video marketing features and conversion tracking, use the marketplace app instead.

Use embed code

For implementations requiring precise iframe control or custom wrapper elements, this method gives you full control over iframe attributes. This approach requires comfort with HTML and CSS. Non-technical users should use the marketplace app instead.

Copy Vidzflow's pre-generated embed code from your dashboard. Add a Code Embed element in Webflow and paste the code directly.

To ensure responsive behavior across devices:

• Set the video container width to 100% in Webflow's Style Panel  
• Apply a padding-bottom of 56.25% for a 16:9 aspect ratio  
• Remove fixed width and height attributes from the iframe code

This approach works across desktop, tablet, and mobile devices while maintaining your video's aspect ratio and preventing distortion.

Autoplay considerations

Modern browsers, including Chrome 66+, Safari 11+, and Firefox 66+, block video autoplay with audio to protect user data and improve the experience. To enable autoplay, add the muted attribute to your iframe code and include allow=autoplay in the iframe attributes. This browser-level restriction applies to all video platforms, not just Vidzflow. For videos where audio is essential, display a visible play button that users can click to start playback with sound enabled.

What you can build

Integrating Vidzflow with Webflow enables video-first experiences across marketing pages, product showcases, and educational content with full control over branding and conversion tracking.

• Marketing landing pages: Create video-driven landing pages with embedded CTAs that direct viewers to sign-up forms or product demos while tracking completion rates and click-through metrics to optimize video placement  
• Portfolio and case study showcases: Display high-quality 4K video work samples with branded players that match your site design and organize project videos across multiple client sites through Vidzflow workspaces  
• Product demo and tutorial libraries: Build self-service video documentation with engagement tracking and heatmaps to identify where users drop off, plus chapter markers and subtitles for accessibility  
• E-commerce product videos: Embed product demonstration videos with in-video CTAs linking directly to purchase pages while monitoring views, watch time, and CTA click-through rates