YouTube
Add YouTube videos to Webflow sites using native embed elements or custom iframe code. Control playback settings and configure responsive layouts directly in Webflow. This integration maintains aspect ratio across breakpoints.
How to integrate YouTube with Webflow
YouTube integration lets you embed videos directly on your site without third-party tools or complicated setup. Webflow's native support handles responsive scaling automatically, and you can customize player behavior through iframe parameters or JavaScript.
Webflow offers several integration methods depending on your needs. Use the native YouTube video element for basic embedding with automatic responsive behavior. Add videos to rich text fields for blog posts and content pages. Paste custom iframe code when you need specific player controls. Or use YouTube's APIs with custom JavaScript for programmatic player control and automated content management.
Use the YouTube video element
The Add panel includes a dedicated YouTube video element for embedding videos with automatic responsive behavior. Add the element to your page, paste your YouTube video URL, and configure settings like autoplay, mute, and player controls.
The YouTube video element automatically takes the full width of its parent container and maintains proper aspect ratio across device sizes.
Key capabilities:
- Configure video URL in the YouTube video element settings by pasting any YouTube video link
- Set start time using the start time parameter to begin playback at specific timestamps
- Control autoplay and mute to configure initial playback behavior
- Toggle player controls to show or hide YouTube's default interface
- Enable privacy mode to use the youtube-nocookie.com domain
The element scales proportionally when the parent container resizes, maintaining video aspect ratio on mobile, tablet, and desktop breakpoints without custom CSS.
Embed videos in rich text elements
YouTube embeds work in rich text fields for blog posts, CMS content, and text-heavy pages. This method integrates videos inline with formatted text content.
Paste YouTube URLs directly into rich text fields, and Webflow converts them to embeddable players. The video documentation explains how rich text embeds maintain responsive behavior similar to the dedicated video element.
Rich text embeds work well for content pages where videos appear alongside paragraphs, images, and other formatted text.
Note: This method doesn't support dynamic CMS binding for video URLs. Each embed requires manual URL entry in the rich text editor.
Add custom iframe code
Custom HTML embeds give you full control over YouTube's iframe parameters. Use Code Embed elements when you need specific player behaviors not available in the standard video element.
Copy the iframe embed code from YouTube's share menu, then paste it into a Code Embed element in Webflow. You can modify iframe parameters directly in the code to customize player behavior.
Advanced configuration options:
- Remove inline dimensions by deleting width and height attributes from iframe code, then apply CSS sizing through Webflow's Style panel for responsive control
- Add URL parameters by appending them to the video URL for custom behavior
- Apply custom styling by wrapping the embed in a div container with aspect ratio padding for responsive scaling
Custom embeds require manual updates when video URLs change. This method doesn't connect to CMS fields, so dynamic video content needs alternative implementation approaches.
Build with Webflow and YouTube APIs
YouTube provides two main APIs for developers. The YouTube Data API v3 enables programmatic content management. The YouTube Player API (iframe API) controls embedded player behavior. While Webflow's native YouTube element handles basic embedding, you can use custom code with these APIs for advanced functionality.
Control player behavior with the iframe API
Add custom JavaScript in Webflow's custom code settings to control player events, methods, and properties beyond what the native element provides. This approach enables programmatic control over video playback, volume adjustment, quality settings, and playback speed through JavaScript functions that interact with the embedded player.
Specific use cases include tracking video completion for analytics, synchronizing multiple video players, creating custom video galleries with programmatic control, or building interactive video experiences that respond to user actions. You can listen to player events like onStateChange, onReady, and onError to trigger custom functionality based on user interaction with your videos.
Add the iframe API script to your page through Webflow's custom code settings. Reference YouTube's iframe API documentation for available methods and events.
Manage video content with the Data API
The YouTube Data API v3 enables programmatic access to YouTube content metadata, playlist management, and channel information. Combine this API with Webflow's CMS through external services or custom backend implementations to automatically populate video collections.
Use cases include automatically syncing YouTube channel uploads to Webflow CMS collections, displaying video statistics and metadata, or building custom video search interfaces. See YouTube's Data API documentation for implementation details and the Webflow API reference for CMS integration options.
What you can build
Integrating YouTube with Webflow lets you build video-rich sites that automatically scale across devices and maintain consistent player behavior.
- Video portfolios: Showcase pages with embedded work samples, client testimonials, or project documentation videos that scale across devices
- Educational course pages: Lesson libraries with embedded tutorial videos, structured navigation, and rich text content alongside each video
- Product landing pages: Demonstration videos, customer review content, or explainer videos that autoplay on scroll for conversion-focused pages
- Blog posts with video content: Video-enhanced blog posts within article text using rich text elements for content marketing and SEO-focused posts
Frequently asked questions
Videos failing on published sites usually have three causes:
- Cookie consent tools block video embeds before users accept tracking, preventing YouTube iframe initialization.
- Embedly (Webflow's video embed service) failures require removing the video element completely and re-adding it with the same URL.
- Incorrect video permissions or malformed URLs prevent YouTube from serving embed content — verify the video allows embedding and uses proper YouTube URL format.
Check your cookie consent settings if using privacy tools. Most consent managers block third-party embeds by default until users opt in. Configure your consent tool to allowlist YouTube domains or adjust blocking rules.
The YouTube video element maintains responsive behavior automatically by taking full parent width and preserving aspect ratio. No additional CSS is required when using this native element.
For custom iframe embeds, remove inline width and height attributes from the YouTube code. Apply responsive dimensions through Webflow's Style panel, or wrap the iframe in a container with aspect ratio padding for precise control. Set the container to
position: relativewithpadding-bottom: 56.25%for 16:9 ratio, then position the iframe absolutely inside.YouTube video elements don't support connecting directly to CMS fields for dynamic content. Dynamic video content requires the custom Embed element with HTML code instead.
Create a plain text CMS field for YouTube video IDs or full URLs, then reference that field inside an Embed element using Webflow's dynamic field insertion syntax. You'll need to construct the iframe HTML with the dynamic field value inserted into the proper URL position. The video documentation confirms this limitation with standard video elements.
Webflow allows direct video uploads with a 30MB maximum file size, suitable for short clips or background videos. Files approaching this limit need compression before upload, and only MP4 format receives official support.
YouTube embeds work better for longer content, multiple videos, or when you need YouTube's player features like captions, quality switching, and playback speed controls. YouTube handles hosting bandwidth and provides adaptive streaming automatically. Embeds don't count against Webflow's storage limits.
Use direct uploads for hero section background videos or short decorative clips. Use YouTube embeds for primary content, tutorials, or any video where users need playback controls.
The standard YouTube element provides basic controls through Webflow's settings panel. For advanced customization, use custom Embed elements with modified iframe code.
Append URL parameters to the video source to control behavior. Refer to YouTube's documentation for available parameters that control player controls, branding, and related video suggestions. You can also modify iframe attributes and apply CSS to the embed container for visual styling.
Description
YouTube is a video hosting and sharing platform that provides embeddable players for integrating video content into websites. Webflow supports YouTube integration through dedicated video elements and custom embed code, with responsive video playback and configurable player controls.
This integration page is provided for informational and convenience purposes only.
StickPNG
Explore our curation of thousands of free transparent PNGs.
Pixabay
Connect Pixabay's library of 5.3+ million royalty-free images, videos, and audio files to your Webflow site. Build visually rich websites without licensing fees while maintaining complete design control and copyright compliance.
Pngtree
Connect Pngtree – a library of millions of royalty-free PNGs, vectors, and design templates – with Webflow to streamline your design workflow by accessing transparent graphics, infographics, and marketing assets without leaving the platform
Pexels
Add millions of free, high-quality stock photos and videos to your Webflow sites instantly. Search and embed professional media content without leaving Webflow, while maintaining proper attribution and optimizing for performance.
Lottieflow by Finsweet
Download unique Lottie icon animations to implement on your website, product, or app for free. Browse for Lottie files, change hex color, customize easing, and download the JSON file. It’s that simple!
LottieFiles
Bring lightweight, scalable vector animations to your Webflow sites with LottieFiles — the platform that makes adding motion as simple as uploading an image.
LottieFiles for Webflow
Get animations designed especially for Webflow.
Listen Notes
Connect Listen Notes with Webflow to embed podcast players and sync podcast content to your CMS automatically.
IconScout
Connect IconScout with Webflow to access 9.3+ million design assets directly in your workflow without context switching.
Related integrations
Get started for free
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
