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

How to Embed YouTube Videos on Squarespace with EmbedShorts

Squarespace is beloved by designers, creatives, and small business owners who want beautiful, professional websites without dealing with code. Adding dynamic YouTube video content to your Squarespace site is the perfect way to showcase your work, build trust, and increase engagement.

EmbedShorts integrates seamlessly with Squarespace, letting you embed responsive, auto-updating video feeds in minutes—all from a simple embed interface.

Why Embed Videos on Your Squarespace Site?

  • Showcase your portfolio: Display project videos, case studies, and client work
  • Build social proof: Embed customer testimonials and success stories
  • Increase time-on-site: Video content keeps visitors engaged longer
  • Improve conversions: Sites with video convert 64% better
  • Stay current: Videos auto-pull from YouTube (no manual updates)
  • Look professional: Modern video galleries elevate your brand
  • Mobile-perfect: Automatically responsive on all devices

What You'll Need

  1. A Squarespace account (any paid plan required for custom code)
  2. A published Squarespace website
  3. A YouTube channel or playlist with videos to showcase
  4. An EmbedShorts account (free to start)

Step 1: Create Your EmbedShorts Widget

  1. Visit embedshorts.com and sign up
  2. Click "Create New Widget"
  3. Choose your content type:
    • Shorts: Perfect for creative portfolios, vertical format
    • Videos: Better for longer-form content, tutorials, testimonials
  4. Select a template that matches your aesthetic:
    • Minimal: Clean, minimalist design (great for portfolios)
    • Dark: Bold, professional look
    • Reels: Creator-focused format
    • Featured: Showcase main video with sidebar (case studies)
    • Magazine: Publication-style layout
  5. Configure your widget:
    • Source: YouTube Channel or Playlist
    • Enter YouTube channel URL or playlist ID
    • Set maximum videos (5-10 recommended)
    • Choose portrait or landscape orientation
  6. Customize styling:
    • Accent color (match your Squarespace brand)
    • Background color
    • Border radius and spacing
  7. Publish your widget

Step 2: Get Your Embed Code

  1. In EmbedShorts dashboard, click "Share"
  2. Select "Embed Code"
  3. Copy the embed 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 Squarespace Site

Method 1: Using Code Block (Recommended)

This is the simplest approach for most Squarespace pages:

  1. Go to your Squarespace editor
  2. Navigate to the page where you want videos
  3. Click the "+" to add a block
  4. Look for "Code" in the block options
  5. Paste your EmbedShorts code into the code block
  6. Click outside the block to save
  7. Adjust the block size:
    • Drag the bottom edge to expand vertically
    • Full width is typically best (code blocks default to full width)
  8. Publish your page

Method 2: Using Markdown Block (Alternative)

Some Squarespace templates support Markdown:

  1. Add a "Markdown" block to your page
  2. Click to edit
  3. Paste your embed code (if Markdown supports HTML)
  4. Save

⚠️ Note: Not all templates support this. The Code Block method is more reliable.

Method 3: Adding to Website Header/Footer (Site-Wide)

To display video on every page:

  1. Go to Settings → Advanced → Code Injection
  2. Under "Footer", paste your EmbedShorts code
  3. This adds the video to every page

⚠️ Warning: This displays the same video feed on all pages. For different videos per page, use Method 1 instead.

Method 4: Using Custom CSS Section (Advanced)

For Squarespace 7.1+:

  1. In your page editor, add a "Code" section
  2. Paste your embed code
  3. Below the code, add custom CSS to style the container:
/* Style the code block container */
.code-block {
  padding: 20px 0;
  margin: 30px 0;
}

/* On mobile, reduce margins */
@media (max-width: 640px) {
  .code-block {
    margin: 15px 0;
  }
}

Squarespace Page Ideas

Portfolio/Gallery Page

Showcase your best work:

  • Use the "Grid" layout for visual impact
  • Add 6-12 videos of your portfolio pieces
  • Position above or alongside text descriptions
  • Perfect for: Videographers, designers, agencies, creators

Home Page

Make a strong first impression:

  • Use the "Featured" or "Slider" layout
  • Limit to 3-5 videos to avoid overwhelming visitors
  • Position between hero section and content
  • Add a headline: "See our latest work" or "Featured projects"

About/Story Page

Build emotional connection:

  • Embed team videos or personal story content
  • Customer testimonial videos build credibility
  • Behind-the-scenes content humanizes your brand
  • Use "Featured" layout for maximum impact

Services/Offerings Page

Demonstrate value:

  • Embed service demo videos
  • Show process videos (how you work)
  • Before/after video case studies
  • Increases conversion and booking rate

Testimonials Page

Build trust with prospects:

  • Create a dedicated page for video testimonials
  • Use "Grid" or "Carousel" layout
  • Add short text description beside each video
  • Powerful social proof that drives conversions

Blog/Journal

Increase engagement:

  • Embed relevant videos in blog posts
  • Keeps readers from bouncing
  • Pairs perfectly with written content
  • Improves SEO (time-on-page signals)

Squarespace-Specific Customization

Matching Your Brand Colors

Squarespace has a unified color system:

  1. Note your primary brand color (go to Design → Colors)
  2. In EmbedShorts dashboard:
    • Set accent color to your brand primary
    • Set background to match your page background
  3. Republish your widget
  4. The embed will now match your Squarespace design

Responsive Layout

Squarespace handles responsiveness beautifully:

  1. The code block automatically adjusts to screen size
  2. EmbedShorts is fully responsive:
    • On desktop: Shows full grid/carousel
    • On tablet: Adapts layout
    • On mobile: Single column, optimized for touch
  3. Test on mobile to ensure it looks perfect

Typography Matching

Your embed text will inherit some Squarespace styling:

  1. If you want custom fonts, you can't override directly from EmbedShorts
  2. Use custom CSS in the code block to style:
/* Match your Squarespace font */
div[id*="embedshorts"] {
  font-family: 'Montserrat', sans-serif; /* or your font */
}

Spacing & Layout

To integrate seamlessly with your page:

  1. Add space above/below the embed:
#embedshorts-widget {
  margin-top: 40px;
  margin-bottom: 40px;
}

@media (max-width: 640px) {
  #embedshorts-widget {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
  1. Or use Squarespace's native spacing:
    • Click the code block
    • Adjust spacing in the block settings

Squarespace Plan Requirements

| Plan | Custom Code | Best For | |------|------------|----------| | Personal | ✗ | No custom embeds | | Business | ✓ | Basic code | | Commerce | ✓ | Full code support | | Enterprise | ✓ | Custom everything |

⚠️ Note: Personal plan does NOT support custom code. You need Business plan or higher.

Combining with Squarespace Features

With Squarespace Blog

Embed videos in your blog posts:

  1. Write a blog post
  2. Click "+" to add a block
  3. Add a "Code" block
  4. Paste your EmbedShorts embed
  5. Videos appear inline with your article

Great for posts like:

  • "Top 10 [Topic] Videos"
  • Tutorial posts with related videos
  • Case study posts with process videos

With Squarespace Collections

For portfolio sites:

  1. Create a collection for your projects
  2. Add a code block to each project page
  3. Embed related videos for that project
  4. Dynamic, portfolio-quality pages

With Squarespace Forms

Create conversion flows:

  1. Add a form asking about interests
  2. Below the form, embed relevant service videos
  3. Videos demonstrate value and build confidence
  4. Increases form submission rate

With E-commerce

If you're selling products:

  1. Embed product demo videos on product pages
  2. Testimonial videos on homepage
  3. Process videos on "How It Works" page
  4. Increases conversion rate significantly

Troubleshooting on Squarespace

Code block isn't showing my embed?

  • Make sure you used the "Code" block, not a text block
  • Check that you pasted the full embed code
  • Reload the page
  • Try in a different browser

Embed looks wrong in the editor?

  • This is normal! Squarespace's editor doesn't always render embeds perfectly
  • Click "Save" and check the live site
  • If it looks good on live site, you're all set
  • The editor display is just a preview

Videos aren't showing?

  • Verify your YouTube channel is public (unlisted won't appear)
  • Check your channel URL or playlist ID is correct
  • Clear your browser cache and reload
  • Try an incognito window

Embed is too wide/narrow?

  • Code blocks inherit the width of your page
  • Go to Design → Sections to adjust page width
  • Or add custom CSS to the code block to resize

The embed doesn't look right on mobile?

  • Test on an actual mobile device (not just browser resize)
  • EmbedShorts is fully responsive
  • If it still looks off, contact support
  • Check Squarespace's mobile preview

Is my website slowing down?

  • EmbedShorts widget is <15 KB (minimal impact)
  • Uses CDN delivery for speed
  • Your site won't slow down noticeably
  • Run a Squarespace speed test to verify

Can I remove the EmbedShorts branding?

  • Free plan: Not available
  • Paid plans: Premium feature
  • Upgrade to Pro or Agency plan to white-label

Performance Considerations

EmbedShorts is optimized for Squarespace:

  • Ultra-lightweight: <15 KB total
  • CDN delivery: Global fast loading
  • Lazy loading: Videos load only when visible
  • Shadow DOM: Isolated styling (won't break your theme)
  • No external dependencies: Doesn't load heavy libraries

Impact on Squarespace page score:

  • Minimal to none
  • Videos use CDN (not your server)
  • Fast initial page load (videos lazy-load)

SEO Benefits on Squarespace

Video content improves Squarespace SEO:

  • Fresh content: Video signals to Google your site is active
  • Time-on-page: Videos keep readers engaged (ranking signal)
  • Lower bounce rate: People stay instead of leaving
  • Engagement: Shared videos mean backlinks
  • Indexing: Embedded YouTube is indexed by Google

Pricing & Next Steps

EmbedShorts is free to start:

  • 1 widget
  • 1,000 monthly views
  • Full customization
  • No credit card required

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 videos to your Squarespace site?

  1. Sign up for free
  2. Create your widget (2 minutes)
  3. Copy the embed code
  4. Add to your Squarespace page using a Code block
  5. Publish

FAQs

Do I need a Business plan? Yes, personal plan doesn't support custom code. Upgrade to Business, Commerce, or Enterprise.

Can I add videos to multiple pages? Yes, create separate widgets for different pages or use the same one multiple times.

Will videos hurt my Squarespace score? No. Widget is <15 KB and uses CDN. Your site speed won't be impacted.

Can I customize the colors? Fully. Customize in EmbedShorts dashboard to match your brand.

What if I want to update the videos? Use a YouTube channel as your source. New videos appear automatically.

Can I hide certain videos? Yes, blacklist video IDs in your EmbedShorts settings.

Is the embed responsive on mobile? Completely. Automatically adjusts to all screen sizes.

Do I need to code this? Not at all. Just copy/paste into the Code block.

Elevate your Squarespace site with dynamic video. Create your free EmbedShorts account and start embedding YouTube videos today.

Ready to embed YouTube videos?

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

Start for free →