Skip to main content
The Spotify Album component embeds a Spotify album player directly into the portfolio, showcasing the developer’s music taste or featured album.

​
Overview

Location: src/app/components/sections/SpotifyAlbum.tsx This simple but effective component uses Spotify’s embed feature to display a playable album within the portfolio layout.

​
Implementation

import React from "react";

const SpotifyAlbum: React.FC = () => {
  return (
    <div className="max-md:hidden max-lg:col-span-1 max-lg:row-span-1 col-span-2 row-span-2 col-start-5 row-start-7 bg-spotify-black rounded-xl">
      <iframe
        className="w-full h-full rounded-xl"
        src="https://open.spotify.com/embed/album/3Dx1IXTwJVIMkEzVMSSSrp?utm_source=generator"
        title="Spotify album player"
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
        loading="lazy"
        style={{ height: "100%", width: "100% }}
      ></iframe>
    </div>
  );
};

export default SpotifyAlbum;

​
Features

​
Spotify Embed

The component uses Spotify’s official embed player: 
<iframe
  src="https://open.spotify.com/embed/album/3Dx1IXTwJVIMkEzVMSSSrp?utm_source=generator"
  title="Spotify album player"
  allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
  loading="lazy"
/>
​
src
string
required
Spotify embed URL for the albumFormat: https://open.spotify.com/embed/album/{ALBUM_ID}
​
title
string
required
Accessible title for the iframe (“Spotify album player”)
​
allow
string
required
Feature permissions for the embedded content
​
loading
'lazy' | 'eager'
default:"lazy"
Defers loading until the component is near the viewport

​
Permissions

The iframe allows the following features:
  • autoplay: Enables automatic playback
  • clipboard-write: Allows copying links/text
  • encrypted-media: Supports protected content
  • fullscreen: Enables fullscreen mode
  • picture-in-picture: Allows PiP video mode
These permissions ensure the Spotify player functions with full features, including playback controls and sharing options.

​
Getting a Spotify Embed URL

To embed a different album or playlist:
  1. Open Spotify (web or desktop app)
  2. Navigate to the album/playlist/track you want to embed
  3. Click the ”…” (more options) button
  4. Select Share → Embed
  5. Copy the generated iframe URL

​
URL Structure

https://open.spotify.com/embed/{type}/{id}?utm_source=generator
Types:
  • album - Full album
  • playlist - Custom or curated playlist
  • track - Single track
  • artist - Artist profile with top tracks
Example URLs: 
Album:    https://open.spotify.com/embed/album/3Dx1IXTwJVIMkEzVMSSSrp
Playlist: https://open.spotify.com/embed/playlist/37i9dQZF1DXcBWIGoYBM5M
Track:    https://open.spotify.com/embed/track/0VjIjW4GlUZAMYd2vXMi3b
The utm_source=generator parameter is automatically added by Spotify’s embed generator and helps with analytics.

​
Grid Layout

​
Desktop Layout

.spotify-album {
  grid-column: span 2;      /* Takes 2 columns */
  grid-row: span 2;         /* Takes 2 rows */
  grid-column-start: 5;     /* Starts at column 5 */
  grid-row-start: 7;        /* Starts at row 7 */
}

​
Mobile Responsive

max-md:hidden                /* Hidden on mobile devices */
max-lg:col-span-1           /* Single column on tablet */
max-lg:row-span-1           /* Single row on tablet */
The component is hidden on mobile devices to optimize screen space and reduce data usage from auto-loading the Spotify embed.

​
Styling

​
Container Styles

.spotify-album {
  background: #191414;          /* bg-spotify-black */
  border-radius: 0.75rem;       /* rounded-xl */
}

/* iframe fills container */
iframe {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;       /* rounded-xl */
}

​
Color: Spotify Black

bg-spotify-black: #191414
This is Spotify’s official brand color for dark backgrounds, creating an authentic Spotify experience.

​
Embed Player Features

The Spotify embed player includes:
  • Album artwork display
  • Track listing with durations
  • Playback controls (play, pause, next, previous)
  • Volume control
  • Progress bar with seek functionality
  • “Open in Spotify” link
  • Share button
  • Follow artist button
Full playback requires users to be logged into Spotify. Non-authenticated users can preview 30-second clips.

​
Player Dimensions

The Spotify embed adapts to container size: Minimum recommended sizes:
  • Width: 300px
  • Height: 380px (for album/playlist)
  • Height: 80px (for single track compact view)
The current implementation uses full container dimensions: 
style={{ height: "100%", width: "100%" }}

​
Performance Optimization

​
Lazy Loading

loading="lazy"
The iframe uses native lazy loading, deferring the Spotify embed until it’s near the viewport. This:
  • Reduces initial page load time
  • Saves bandwidth on mobile
  • Improves Core Web Vitals scores

​
Component-Level Lazy Loading

For additional optimization, lazy load the entire component: 
import dynamic from 'next/dynamic';

const SpotifyAlbum = dynamic(
  () => import('./sections/SpotifyAlbum'),
  { 
    ssr: false,
    loading: () => (
      <div className="animate-pulse bg-spotify-gray rounded-xl" />
    )
  }
);

​
Customization Examples

​
Display a Playlist Instead

<iframe
  src="https://open.spotify.com/embed/playlist/37i9dQZF1DXcBWIGoYBM5M"
  // ... other props
/>

​
Compact Track View

For a single track in compact mode: 
<iframe
  src="https://open.spotify.com/embed/track/0VjIjW4GlUZAMYd2vXMi3b?utm_source=generator&theme=0"
  className="w-full h-20 rounded-xl"  // Shorter height
  // ... other props
/>

​
Theme Parameter

Add &theme=0 for compact white theme: 
https://open.spotify.com/embed/album/...?utm_source=generator&theme=0
The compact white theme works well in light-mode designs or as an accent in dark interfaces.

​
Accessibility

​
Screen Readers

The iframe includes a descriptive title: 
title="Spotify album player"
This provides context for assistive technology users.

​
Keyboard Navigation

The Spotify embed player supports full keyboard control:
  • Space: Play/pause
  • Arrow keys: Navigate tracks
  • Tab: Focus through controls
  • Enter: Activate focused control

​
Privacy Considerations

The Spotify embed:
  • Loads content from open.spotify.com
  • May set cookies for analytics
  • Tracks playback data if user is logged in
  • Respects Do Not Track (DNT) browser settings
Consider adding a cookie consent notice if your site targets GDPR/CCPA compliance regions.

​
Browser Support

The Spotify embed works in all modern browsers:
  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Opera 76+

​
Fallback for Older Browsers

<iframe ...>
  <p>
    Your browser doesn't support iframes. 
    <a href="https://open.spotify.com/album/3Dx1IXTwJVIMkEzVMSSSrp">
      Listen on Spotify
    </a>
  </p>
</iframe>

​
Dependencies

{
  "react": "Core React library",
  "External": "Spotify Embed API (no package required)"
}
No additional npm packages are needed. The component uses Spotify’s native embed functionality via iframe.

​
Usage Variations

Showcase a curated playlist: 
const SpotifyPlaylist: React.FC = () => {
  return (
    <div className="col-span-2 row-span-2 bg-spotify-black rounded-xl">
      <iframe
        className="w-full h-full rounded-xl"
        src="https://open.spotify.com/embed/playlist/37i9dQZF1DX0XUsuxWHRQd"
        title="Coding focus playlist"
        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
        loading="lazy"
        style={{ height: "100%", width: "100%" }}
      />
    </div>
  );
};

​
Now Playing

Display currently playing track (requires dynamic URL): 
const NowPlaying: React.FC<{ trackId: string }> = ({ trackId }) => {
  return (
    <iframe
      src={`https://open.spotify.com/embed/track/${trackId}`}
      className="w-full h-20"
      // ... props
    />
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us