Framer is rapidly becoming the go-to platform for modern web designers and developers who want pixel-perfect control without leaving the design tool. If you're building a cutting-edge website on Framer and want to add dynamic YouTube video content, EmbedShorts is the most straightforward solution.
In minutes, you can embed a beautiful, responsive video feed that blends seamlessly with your Framer design. No friction. No complex setup. Just clean video integration.
Why Add Videos to Your Framer Site?
- Showcase your craft: Display portfolio pieces and case studies
- Maintain design control: Embeds integrate cleanly without breaking aesthetics
- Keep visitors engaged: Video content reduces bounce rate significantly
- Build trust: Testimonials and demos increase conversions
- Stay current: Videos auto-pull from YouTube (zero maintenance)
- Modern feel: Demonstrates you're tech-forward
- Responsive by default: Works perfectly on all devices
What You'll Need
- A Framer account (free to start)
- A published Framer website
- A YouTube channel or playlist with videos
- An EmbedShorts account (free to start)
Step 1: Create Your EmbedShorts Widget
- Go to embedshorts.com and create an account
- Click "Create New Widget"
- Select content type:
- Shorts: Vertical TikTok/Reels-style videos (great for creative portfolios)
- Videos: Longer-form YouTube content
- Choose a template:
- Minimal: Perfect for designers (clean, modern)
- Dark: Bold, sophisticated
- Reels: Creator-focused design
- Featured: Showcase main video + sidebar
- Configure:
- Source: YouTube Channel or Playlist
- Paste your YouTube URL or playlist ID
- Set max videos (5-10 recommended for Framer pages)
- Choose orientation (portrait or landscape)
- Customize styling:
- Accent color to match your Framer brand colors
- Background color for your page
- Border radius for subtle or rounded corners
- Adjust card spacing for breathing room
- Publish
Step 2: Get Your Embed Code
- In EmbedShorts dashboard, click "Share"
- Select "Embed Code"
- Copy the code:
<script src="https://embed.embedshorts.com/widget.js" data-widget-id="YOUR_WIDGET_ID"></script> <div id="embedshorts-YOUR_WIDGET_ID"></div>
Step 3: Add to Your Framer Site
Method 1: Using Embed Component (Recommended)
The cleanest way to add video to your Framer design:
- Open your Framer project
- Navigate to the page where you want videos
- In the canvas, click "Add" or drag component
- Search for "Embed" component
- Add it to your page
- Click the Embed component
- In the properties panel:
- Look for "Iframe" or "Embed" field
- Paste your EmbedShorts code
- Adjust size and positioning:
- Resize the component to fit your layout
- Full-width usually works best
- Adjust height in properties
- Save your project
Method 2: Custom Code Block (Alternative)
If your Framer template supports custom code:
- Add a "Code" component to your page
- Paste your EmbedShorts embed code
- Configure the component properties
- Save
Method 3: Using Framer's Rich Text Block (Limited)
Some Framer components support embedded content:
- Add a Rich Text block
- Look for an "Embed" option
- Paste your embed code
- May require wrapping in iframe tags
Method 4: Site-Wide Header/Footer (All Pages)
To display videos on every page:
- Go to your Framer project settings
- Look for "Custom Code" or "Site Code" section
- Add your EmbedShorts code to the header
- Videos appear on all pages
⚠️ Note: This displays the same feed everywhere. For page-specific videos, use Method 1 instead.
Framer Design Integration Tips
Color Matching
Make your embed feel native to Framer:
- Use your Framer color palette
- In EmbedShorts dashboard:
- Set accent color to your primary brand color
- Set background to match your page
- Maintain visual consistency across your site
Responsive Breakpoints
Framer excels at responsive design:
- When sizing your embed component:
- Desktop: Full width minus padding
- Tablet: Adjust proportionally
- Mobile: Stack to single column
- Framer automatically handles this if you set component responsive
- EmbedShorts video feed automatically adapts to container size
Layout Integration
Integrate videos seamlessly with your Framer layout:
Above content: Hero area impact
- Use "Featured" or "Slider" layout
- Full-width, prominent placement
- Creates strong visual statement
Beside content: Balanced design
- Use "Featured" or "Scroll" layout
- 50/50 split with text (desktop only)
- Stacks on mobile
Full-width sections: Maximum impact
- Use any layout
- Let videos breathe
- Add generous spacing
Grid layout: Multiple pieces
- Use "Grid" layout
- Modern portfolio feel
- Perfect for case studies
Interactive Elements
Framer supports interactions on components:
- Select your embed component
- Add interaction triggers:
- On scroll: Fade in
- On hover: Subtle scale effect
- On load: Slide in from left/right
- These enhance the presentation without changing the video feed
Best Framer Page Structures
Portfolio/Work Page
Showcase your projects:
- Hero section with brief intro
- Grid of video case studies (use Grid layout)
- Each video links to full case study
- Footer with next steps
Home Page
Make an impact:
- Hero section (text + imagery)
- Featured video section (one large video + headline)
- Additional content sections below
- Clear call-to-action
About/Services Page
Build credibility:
- Team video section
- How we work video
- Client testimonial videos
- Use Featured layout for each
Agency/Studio Site
Professional showcase:
- Portfolio videos on main page
- Process videos on services page
- Team videos on about page
- Client testimonials throughout
Creator/Influencer Site
Personal branding:
- Featured video of your best content
- Grid of latest videos
- Bio section with personality
- Call-to-action to follow/subscribe
Framer-Specific Customization
Custom CSS (Advanced)
Style your embed with Framer's custom CSS:
/* EmbedShorts container styling */
div[id*="embedshorts"] {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 40px 0;
}
/* Mobile adjustments */
@media (max-width: 768px) {
div[id*="embedshorts"] {
margin: 20px 0;
}
}
- In Framer, go to Code section
- Add the CSS above
- Videos gain subtle shadow and spacing
Framer Components Compatibility
EmbedShorts works with:
- ✓ Embed component
- ✓ Custom code blocks
- ✓ Rich text with HTML support
- ✓ Third-party component libraries
- ✓ Framer X and newer versions
Performance
Framer is fast, and EmbedShorts keeps it that way:
- Widget: <15 KB (negligible impact)
- CDN delivery: Global fast loading
- Lazy loading: Videos load only when visible
- No external dependencies: Clean, minimal footprint
Advanced: Using Framer's API (Developers)
If you're building custom components:
// Fetch EmbedShorts data via API
fetch('https://api.embedshorts.com/embed/YOUR_WIDGET_ID')
.then(res => res.json())
.then(data => {
// Use data.videos, data.settings
// Build custom UI if desired
})
Contact EmbedShorts support for full API documentation.
Monetization Strategies
Once videos are embedded:
Portfolio/Agency:
- Showcase client work
- Convert visitors to leads
- Use testimonial videos
Creator/Influencer:
- Embed best content
- Link to monetization (Patreon, courses, etc.)
- Drive subscriptions
SaaS/Product:
- Product demo videos
- Customer testimonials
- Feature walkthrough videos
Troubleshooting on Framer
Embed isn't showing?
- Make sure you used an Embed component
- Check that your YouTube channel is public
- Paste the complete embed code
- Try a different browser
Embed looks wrong in the editor?
- Framer editor doesn't always preview embeds perfectly
- Click "Preview" or publish to see actual result
- If it looks good live, you're fine
Videos aren't responsive?
- Check that Framer component has responsive enabled
- EmbedShorts adapts to its container automatically
- Test on actual mobile device
Custom code isn't working?
- Verify you're in the Code section, not Design
- Check for syntax errors
- Contact Framer support if issues persist
Styling conflicts?
- EmbedShorts uses Shadow DOM (isolated)
- Conflicts should be rare
- Custom CSS can override if needed
The embed is too small/large?
- Resize the component in the design canvas
- Adjust width/height in component properties
- EmbedShorts scales proportionally
Performance Optimization
For maximum speed on Framer:
- Use lazy loading: Videos load only when scrolled into view
- Limit video count: 5-10 per widget for fast initial load
- Choose right layout: "Scroll" layout loads fewer videos initially
- Test page speed: Framer Analytics shows impact
Result: Your Framer site stays lightning-fast.
SEO on Framer
Video embedding helps SEO:
- Fresh content: Signals active maintenance to Google
- Time-on-page: Video increases engagement (ranking factor)
- Lower bounce rate: People stay longer
- YouTube integration: Videos are indexed
- User experience: Signals quality to Google
Pricing & Getting Started
EmbedShorts is free to start:
- 1 widget
- 1,000 monthly views
- Full customization
- No credit card
Upgrade as you scale:
- Starter: $19/mo (3 widgets, 10K views)
- Pro: $99/mo (10 widgets, 100K views)
- Agency: $499/mo (unlimited, white-label)
Ready to add video to your Framer site?
- Sign up for free
- Create your widget (2 minutes)
- Copy the embed code
- Add Embed component to Framer
- Paste code and resize
- Publish
FAQs
Works with Framer's new build system? Yes, fully compatible with latest Framer.
Can I use multiple embeds? Yes, create separate widgets for different pages or sections.
Does it slow down my Framer site? No. <15 KB widget + CDN delivery = no performance impact.
Can I customize colors? Fully. Match your Framer brand colors perfectly.
What if I add new videos to YouTube? If sourced from a channel, new videos appear automatically.
Can I hide specific videos? Yes, blacklist IDs in your EmbedShorts settings.
Is responsive design automatic? Yes. EmbedShorts adapts to any container size.
Do I need to know how to code? Not at all. Embed component handles everything.
Elevate your Framer site with modern video. Create your free EmbedShorts account and embed dynamic YouTube videos today.