Skip to main content
返回博客

文章

Embedding YouTube and Spotify in a Portfolio Page: 2026

Embedding YouTube and Spotify in a Portfolio Page, step-by-step for Squarespace, WordPress, Adobe, and more—fix 30s previews, speed issues. Learn how.

Embedding YouTube and Spotify in a Portfolio Page: 2026

Embedding YouTube and Spotify in a Portfolio Page: 2026

embedding youtube and spotify in a portfolio page

TL;DR

Embedding YouTube and Spotify in a portfolio page keeps visitors on your site instead of sending them elsewhere. This guide walks you through the exact steps for popular site builders like Squarespace, WordPress, Adobe Portfolio, Portfoliobox, and more. You’ll also learn how to fix the most common problems, including Spotify’s 30-second preview limitation and slow page loads from too many video embeds.

Why Embed Instead of Link?

A recruiter scanning your portfolio at 11 PM is not going to click an external link to YouTube, wait for it to load, then navigate back. They’ll move on. An embedded player lets visitors watch your demo reel or listen to your tracks right on your page.

For musicians, video producers, podcasters, and developers showcasing work, this is the difference between a portfolio that holds attention and one that gets abandoned.

The good news: embedding is straightforward on every major platform. Let’s get into the steps.

How to Get Your Embed Code

Before you paste anything into your site builder, you need the embed code from YouTube or Spotify.

Getting a YouTube Embed Code

  1. Go to the YouTube video you want to embed.
  2. Click Share below the video.
  3. Click Embed in the popup.
  4. YouTube will show you an iframe code snippet. Copy the entire thing.

Optional tweaks before you copy: Check the boxes for “Show player controls” and uncheck “Show suggested videos” if you don’t want viewers distracted by other content after your video ends. You can also set a start time if you want the video to begin at a specific moment.

Getting a Spotify Embed Code

  1. Open the track, album, playlist, or podcast episode in Spotify (web or desktop app).
  2. Click the three-dot menu (⋯).
  3. Select Share, then Embed track (or album/playlist).
  4. Spotify will open its embed generator page. Choose your size and style, then click Copy to grab the code.

Now you have the snippet. The next step depends on which platform you’re using.

Platform-by-Platform Instructions

Squarespace

Squarespace makes embedding simple with its Code Block.

For YouTube:

  1. Open the page editor and click the + button to add a new block.
  2. Select Video from the block menu.
  3. Paste the YouTube URL directly (not the embed code). Squarespace auto-converts it into a responsive player.

For Spotify:

  1. In the page editor, click + to add a block.
  2. Choose Code (under “More”).
  3. Paste the Spotify iframe embed code into the code editor.
  4. Click outside the block to preview it.

Tip: Squarespace doesn’t auto-convert Spotify URLs the way it does YouTube links. You need the full iframe embed code for Spotify.

Practitioners on the Squarespace forum note that combining Spotify, SoundCloud, and YouTube embeds on a single page (common for music studio “Releases” sections) can get tricky because each platform has different player dimensions. Test your layout on mobile after adding multiple embeds.

WordPress

WordPress supports both methods: URL pasting and code embedding.

For YouTube:

  1. In the block editor (Gutenberg), add a new block.
  2. Simply paste the YouTube URL on its own line. WordPress auto-embeds it using oEmbed, no code needed.
  3. Alternatively, add a Custom HTML block and paste the iframe embed code.

For Spotify:

  1. Add a Custom HTML block.
  2. Paste the Spotify iframe embed code.
  3. Click Preview to verify it works.

WordPress also auto-converts Spotify URLs in some themes, but results are inconsistent. The Custom HTML block is the reliable method.

Adobe Portfolio

For YouTube:

  1. Open your project page in the editor.
  2. Click the + button to add content.
  3. Select Video and paste your YouTube URL. Adobe Portfolio handles the rest.

For Spotify:

  1. Click + to add content.
  2. Choose Embed (the embed code option).
  3. Paste the Spotify iframe code.
  4. Resize the block as needed.

Portfoliobox

For YouTube:

  1. In the page editor, add a new module.
  2. Select Video and paste the YouTube link.

For Spotify:

  1. Add a Code or HTML module.
  2. Paste the Spotify embed code.
  3. Save and preview.

Notion (Used as a Portfolio)

For both YouTube and Spotify:

  1. Type /embed on a new line.
  2. Paste the YouTube or Spotify URL.
  3. Notion creates an inline player automatically.

This works well for simple portfolios shared as public Notion pages, though you have limited control over sizing.

Wix

For YouTube:

  1. Click Add (+) in the editor.
  2. Go to Embed & Social, then select YouTube.
  3. Paste the video URL.

For Spotify:

  1. Click Add (+), then Embed & Social, then Custom Embed.
  2. Select Embed a Widget and paste the Spotify iframe code.

KnolMe

If you’d rather skip the copy-paste process entirely, KnolMe supports YouTube, Spotify, and Bilibili embeds natively. You paste the URL when adding a project, and the platform handles the player, responsive sizing, and performance optimization automatically. It’s especially useful if you want a single shareable link with all your media in one place, since AI builds the layout for you.

Useful YouTube Embed Settings

When you paste an embed code, you can tweak the URL inside it to control how the player behaves. These are the most useful settings for portfolios:

  • Hide suggested videos: Add ?rel=0 to the end of the URL in your embed code. This doesn’t fully remove suggestions, but limits them to videos from the same channel.
  • Remove YouTube branding: Add &modestbranding=1 to reduce the YouTube logo on the player.
  • Loop the video: Add &loop=1 if you want a demo reel or animation to repeat.
  • Start at a specific time: Add &start=30 (where 30 is seconds) to begin playback at a particular moment.

You can combine these. A URL inside your embed code might look like:
https://www.youtube.com/embed/VIDEO_ID?rel=0&modestbranding=1

The Spotify 30-Second Preview Problem (And What to Do About It)

This is the single most common frustration with Spotify embeds, and most tutorials don’t explain it well.

The issue: If the person visiting your portfolio is not logged into a Spotify Premium account in their browser, they will only hear a 30-second preview of each track. This applies to free Spotify users and anyone not logged in at all.

The embed checks the visitor’s account status, not yours. So even if you have Premium, your visitors may only get previews.

Practitioners on the Spotify Community forums describe this as a recurring headache. One user embedded a Spotify playlist on a Weebly site but could only get 30-second previews despite trying different devices, browsers, and clearing their cache. The problem was that they were testing while logged out.

What you can do:

  1. Accept the limitation and add a small note on your page: “Log in to Spotify for full tracks.”
  2. Supplement with YouTube. If a track is also on YouTube, embed both so visitors have a full-length option regardless of their Spotify status.
  3. Use Spotify for branding, YouTube for playback. The Spotify embed looks professional and signals that your music is on the platform, while a YouTube embed ensures everyone can hear the full track.

Another Spotify Gotcha: The Missing Attribute

Spotify’s embed code includes an allow="encrypted-media" attribute on the iframe tag. Some site builders strip this out when you paste HTML. If it gets removed, the embed will only play previews, even for Premium users.

After pasting your Spotify embed code, switch to the HTML view and verify that allow="encrypted-media" is still there. If your editor removed it, add it back manually.

How to Keep Your Page Fast with Multiple Embeds

Each YouTube embed loads roughly 0.7 to 1.3 MB of data and triggers over 20 separate requests to Google’s servers. Put three videos on one page and you’ve added over 2 MB of extra weight. Your page will feel slow, especially on mobile.

Here are three approaches, from simplest to most effective:

1. Add Lazy Loading (Easiest)

If you can edit HTML, add loading="lazy" to each iframe tag:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy"></iframe>

This tells the browser to skip loading the video player until the visitor scrolls to it. One practitioner reported their mobile speed score jumped from 56 to 78 after adding lazy loading to a page with four YouTube videos.

Most modern site builders handle this automatically, but it’s worth checking.

2. Use a Thumbnail Placeholder (More Effective)

Instead of loading the full YouTube player right away, display a static thumbnail image that looks like a video player. The actual player loads only when someone clicks play. This is sometimes called the “facade pattern.”

If you’re comfortable with code, the library lite-youtube-embed does this automatically. If not, look for plugins on your platform (WordPress has several options like “Starter Templates” or “WP YouTube Lyte”).

3. Use a Platform That Optimizes for You

If performance tweaking sounds like more work than you signed up for, portfolio tools like KnolMe handle optimization behind the scenes. You paste a URL, and the platform manages loading behavior so your page stays fast.

Making Embeds Look Good on Mobile

If your YouTube embed looks great on desktop but overflows or gets tiny on a phone, you have a responsive sizing issue.

Quick fix for any platform that lets you edit HTML: Wrap your iframe in a container div like this:

<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
    style="position:absolute; top:0; left:0; width:100%; height:100%;" 
    frameborder="0" allowfullscreen loading="lazy">
  </iframe>
</div>

The 56.25% padding creates a 16:9 aspect ratio that scales to any screen width.

If you’re using a site builder: Most modern platforms (Squarespace, Wix, WordPress with block editor) handle responsive sizing automatically when you use their built-in video blocks. The issue usually comes up only when you paste raw iframe code into an HTML block.

Troubleshooting Common Problems

Embed shows a blank space or doesn’t load:

  • Try viewing your page in an incognito/private browser window with extensions disabled. Ad-blockers and script-blockers frequently break embedded players, especially Spotify.
  • Verify the video or track hasn’t been made private or removed.
  • Check that your site builder hasn’t stripped important attributes from the iframe code.

Spotify play button doesn’t work on desktop but works on mobile:

  • This is a known Spotify issue related to how their player handles authentication in iframes on desktop browsers. Developers on the Spotify Developer Forum have documented it repeatedly. There’s no user-side fix. Consider adding a direct Spotify link as a fallback.

YouTube shows related videos from other channels:

  • Add ?rel=0 to your embed URL. It won’t eliminate suggestions entirely, but it limits them to your channel’s content.

Embed looks broken in the editor but works on the live page:

  • Many site builders don’t render iframes in edit mode. Always check the published or preview version before troubleshooting.

Page is extremely slow after adding embeds:

  • See the performance section above. Lazy loading is the minimum fix. For pages with three or more video embeds, use thumbnail placeholders.

A Note on Privacy

YouTube embeds send visitor data (including IP addresses) to Google the moment your page loads, even before anyone presses play. YouTube offers an alternate embed URL (youtube-nocookie.com) that delays cookies until playback starts, but it still transmits IP data on page load.

If you serve visitors in the EU or care about privacy, consider adding a cookie consent notice to your portfolio. Your site builder may have a plugin or built-in setting for this.

FAQ

Why does my Spotify embed only play 30 seconds?

The embed checks the visitor’s account, not yours. If they’re not logged into Spotify Premium in their browser, they get a 30-second preview. Also check that the allow="encrypted-media" attribute hasn’t been stripped from your iframe code, as removing it forces preview mode for everyone.

Why is my portfolio page so slow after adding YouTube videos?

Each YouTube embed loads 0.7 to 1.3 MB of data. Add loading="lazy" to your iframe tags, or use thumbnail placeholders that load the full player only when clicked. For a simpler path, portfolio tools like KnolMe manage this optimization automatically.

Can I just paste a YouTube or Spotify URL without using embed code?

On some platforms, yes. WordPress and Notion auto-convert pasted URLs into embedded players. Squarespace does this for YouTube but not Spotify. Check your platform’s documentation, and fall back to the iframe embed code method if auto-conversion doesn’t work.

Can I embed both YouTube and Spotify on the same portfolio page?

Yes. Just be mindful of page speed, since each embed adds weight independently. Use lazy loading for any embeds below the fold, and test on mobile. For musicians, having both platforms represented is actually a good strategy, as YouTube gives full playback while Spotify signals professional distribution.

Do I need to know HTML to embed YouTube or Spotify?

For most site builders, no. Platforms like Squarespace, Wix, and WordPress have dedicated video or embed blocks where you paste a URL or code snippet. If you want to skip even that, AI-powered tools like KnolMe let you build a portfolio from URLs and files and handle all the embedding for you.

What’s the difference between linking and embedding?

A link sends visitors away from your page. An embed displays the content directly with an interactive player. Embedding keeps people on your portfolio, which means more engagement and a more professional impression for recruiters and clients.

Will embeds work if the viewer doesn’t have a YouTube or Spotify account?

YouTube embeds work for everyone, no account needed. Spotify embeds work too, but non-Premium visitors (or anyone not logged in) will only hear 30-second previews of tracks.

For more portfolio-building tips, explore the full guide library.

Embedding YouTube and Spotify in a Portfolio Page: 2026