FeaturesHow it worksPricingBlog
All articles
Tutorial2025-05-15 · 9 min read

How to Embed YouTube Videos on Webflow with EmbedShorts

Webflow is the go-to platform for designers and agencies who want full creative control without writing code. If you're building a portfolio, agency website, or client project on Webflow, embedding a dynamic YouTube video feed can set your site apart and keep visitors engaged.

EmbedShorts makes it incredibly easy to add a stunning, responsive video embed to your Webflow site—in minutes, with zero coding required.

Why Embed Videos on Your Webflow Site?

  • Showcase your work: Display project demos, case studies, or client testimonials
  • Build credibility: Video testimonials are 97% more likely to convince visitors
  • Keep visitors longer: Embedded media increases time-on-site significantly
  • Improve conversion: Video on landing pages can increase conversions by up to 80%
  • Create dynamic content: Auto-pull latest videos from YouTube without updating manually
  • Stay design-focused: Let EmbedShorts handle the technical details

What You'll Need

  1. A Webflow account (free or paid plan)
  2. A published Webflow site (you need edit access)
  3. A YouTube channel or playlist with videos you want to showcase
  4. An EmbedShorts account (free to start)

Step 1: Create Your EmbedShorts Widget

  1. Go to embedshorts.com and sign up (takes 2 minutes)

  2. Click "Create New Widget"

  3. Choose your content type:

    • Shorts: Perfect for portfolio sites, TikTok/Reels-style vertical format
    • Videos: Better for longer content, tutorials, or case studies

  4. Select a template that matches your design aesthetic:

    • Minimal: Clean, underlined titles, light background
    • Dark: Bold, modern look with dark cards
    • Reels: TikTok-style, perfect for creator portfolios
    • Featured: Big main video + sidebar list (great for case studies)
    • Creator: Optimized for personal brands

  5. Configure the basics:

    • Select "YouTube Channel" or "Playlist"
    • Paste your YouTube channel URL or playlist ID
    • Set max number of videos (5-10 recommended for above-the-fold)
    • Choose portrait or landscape orientation

  6. Customize styling:

    • Accent color: Matches your brand
    • Background color: Blends with your Webflow site
    • Border radius: Rounded corners for modern look
    • Card gap: Spacing between videos
    • Remove badge: Hide "EmbedShorts" branding (paid plans)

  7. Click "Save & Publish"

Step 2: Get Your Embed Code

  1. After publishing, click the "Share" button
  2. Select "Embed Code" (or copy the iframe)
  3. You'll see something like: 
    <script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script>
<div id="embedshorts-YOUR_WIDGET_ID"></div>
  4. Copy this code (you'll paste it into Webflow next)

Step 3: Add to Your Webflow Site

Method 1: Using Webflow's Embed Component (Recommended)

This is the cleanest approach and works on any Webflow plan.

  1. Open your Webflow site in the designer
  2. Navigate to the page where you want the video feed
  3. Add an Embed component:
    • Click the Add panel (left sidebar)
    • Search for "Embed" component
    • Drag it to your page where you want videos
  4. Configure the embed:
    • Select the Embed component
    • Go to the Settings panel (right side)
    • In the Embed code field, paste your EmbedShorts code
  5. Set the embed size:
    • Recommended: Set width to 100% for responsiveness
    • Height depends on layout (200-600px typically)
  6. Add margin/padding in the Design panel to control spacing
  7. Publish your site

Method 2: Using a Code Custom Component (Advanced)

If you want more control over styling:

  1. Go to Pages in Webflow
  2. Edit your page
  3. Add an HTML Embed component
  4. Paste your EmbedShorts embed code
  5. Wrap it in a container div with custom CSS if needed

Design Integration Tips

Responsive Sizing

EmbedShorts is fully responsive, but here's how to ensure it looks perfect:

  1. Add a container around your embed (div with max-width)
  2. Set the container to be 100% width on mobile, 80% on desktop
  3. Add padding (20px on mobile, 40px on desktop) for breathing room

Example structure:

Container (max-width: 1200px, margin: 0 auto)
  └─ EmbedShorts Embed (100% width)

Best Page Placements

Homepage:

  • Add below your hero section
  • Use the "Featured" layout for maximum impact
  • Limit to 5-8 videos above the fold

Portfolio/Case Studies Page:

  • Embed a grid layout showcasing multiple projects
  • Pair with case study text for context

About/Team Page:

  • Showcase team videos or behind-the-scenes content
  • Use "Featured" layout to tell your story

Service Pages:

  • Add demo videos of your services in action
  • Increases credibility and reduces bounce rate

Blog/Resources:

  • Embed related videos alongside written content
  • Keeps readers on your site longer

Color Matching

To make the embed blend seamlessly:

  1. In your EmbedShorts dashboard, match your accent color to your Webflow brand color
  2. Set the background color to match your page background
  3. If your page has a light background, use white or light gray in EmbedShorts
  4. If dark background, use dark gray or dark blue

Animations & Effects

In Webflow, you can add interactions to your embed container:

  1. Select the embed component
  2. Go to Interactions (lightning bolt icon)
  3. Add an Entrance animation:
    • Fade in on scroll: Great for above-the-fold video feeds
    • Grow on scroll: Creates momentum
  4. Test on desktop and mobile

Customizing EmbedShorts for Webflow

Layout Options

Each layout has specific use cases on Webflow:

| Layout | Best For | Width Needed | |--------|----------|--------------| | Carousel | Portfolio gallery, clean look | Full width (1200px+) | | Slider | Homepage hero, paginated feel | Full width | | Featured | Case studies, storytelling | Full width | | Grid | Modern portfolio, multiple projects | Full width (3 columns) | | Scroll | Minimal single-column feed | 400-600px width |

Dynamic Video Lists

One of the best features for Webflow: Your video feed automatically updates when you add new videos to YouTube. No manual updates needed!

  1. Set your widget to pull from a YouTube channel (not just a single video)
  2. It will automatically fetch your latest videos
  3. Videos appear in your embed without any action from you

Troubleshooting on Webflow

Embed isn't showing?

  • Make sure you used an "Embed" component, not a text element
  • Check that your YouTube channel is public
  • Clear browser cache and reload
  • Try a different browser

Styling looks off?

  • Go back to your EmbedShorts dashboard
  • Adjust the accent and background colors
  • Change the border radius or card gap
  • Republish

Embed is too wide/narrow on mobile?

  • Select the embed in Webflow
  • In the Design panel, set responsive breakpoints:
    • Desktop: 100%
    • Tablet: 90%
    • Mobile: 100%

Videos appear cropped or distorted?

  • In your EmbedShorts dashboard, switch between portrait and landscape
  • Make sure your layout matches your video format

My Webflow animations aren't triggering?

  • Animations work on the container, not the embed itself
  • Make sure the embed is inside a scrollable section
  • Test in published mode (not preview)

SEO & Performance

EmbedShorts is built for speed:

  • Ultra-lightweight: <15 KB widget (won't hurt your Webflow speed score)
  • CDN delivery: Videos load fast worldwide
  • Shadow DOM: Isolated from your Webflow styles (no conflicts)
  • Lazy loading: Videos load only when visible

SEO benefits:

  • Fresh, dynamic content signals to Google
  • Time-on-page increases (Google ranking factor)
  • Embedded media is indexed (boosts relevance)

Advanced: Custom CSS (for Webflow Pro)

If you want to fully customize the embed appearance, you can target it with custom CSS:

  1. In Webflow, go to Project Settings → Custom Code → Head Code
  2. Add custom CSS to style the embed:
div[id*="embedshorts"] {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  margin-bottom: 40px;
}

Pricing & Next Steps

EmbedShorts is free to start:

  • 1 widget
  • 1,000 monthly views
  • Full customization
  • Perfect for testing

Upgrade as you grow:

  • Starter: $19/mo (3 widgets, 10K views)
  • Pro: $99/mo (10 widgets, 100K views)
  • Agency: $499/mo (unlimited, white-label, remove branding)

Ready to add dynamic video to your Webflow site?

  1. Sign up for free
  2. Create your widget in 2 minutes
  3. Copy the embed code
  4. Add to your Webflow site using the Embed component
  5. Publish and watch engagement increase

FAQs

Will EmbedShorts slow down my Webflow site? No. The widget is <15 KB and uses CDN delivery. Your Webflow page speed won't be impacted.

Can I use multiple embeds on one page? Yes, you can add different widgets to different sections of the same page.

Does it work on all Webflow plans? Yes, even the free plan. You just need a published site.

Can I customize the colors to match my brand? Completely. Every color is customizable in the EmbedShorts dashboard.

What happens if I delete videos from YouTube? They automatically disappear from your embed. Your feed stays fresh without any action from you.

Can I hide specific videos from the feed? Yes, blacklist video IDs in your EmbedShorts settings without deleting them from YouTube.

Do I need to code this? Not at all. The Embed component handles everything.

Enhance your Webflow site today. Create a free EmbedShorts account and add a dynamic video feed to your next project.

Ready to embed YouTube videos?

Free plan available. No credit card. 5-minute setup.

Start for free →