---
title: "YouTube Playlist — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Ismoil Safarov · Players. Premium and distraction-free playlist!"
canonical: "https://framer.elliotli.dev/component/youtube-playlist"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/YouTube Playlist

# YouTube Playlist

Premium and distraction-free playlist!

[View on Framer](https://framer.com/marketplace/components/youtube-playlist/?via=elliot-li)

![YouTube Playlist preview image 1](https://framer.elliotli.dev/og/component/youtube-playlist/0d51db46774e0123/1600x1200.jpg)

## Summary

Premium and distraction-free playlist!

## Description

-   **Smart Auto-Play Progression:** Sit back and relax! When a video ends, the playlist automatically advances to and plays the next video in the queue.
    
-   **Fully Responsive:** A beautiful row-based layout on desktop that intelligently collapses into an intuitive column-based layout on smaller screens and mobile devices.
    
-   **Premium Player UI:** Powered by an under-the-hood integration with Plyr ensuring a clean, ad-free aesthetic with settings for playback speed, full-screen, and picture-in-picture.
    
-   **Native iOS Experience:** Built-in logic to trigger native full-screen mode for iOS and iPadOS users upon hitting play.
    
-   **Clean Custom Scrollbar:** The playlist menu utilizes a custom, heavily refined scrollbar that matches modern web aesthetics.
    

### Fully Customizable Properties

Make it match your exact branding without touching a single line of code. Tweak everything directly from the Framer Property panel:

-   **Playlist Items:** Manage your video titles, source types (YouTube / URL / File), links, cover images, and displayed duration text.
    
-   **Header Title:** Easily rename the playlist header (e.g., "Course Content", "My Showreel").
    
-   **Brand Color:** Control the color of the main play button, loading states, and active-item indicators.
    
-   **Styling & Theme:** Tweak the Background Color, Header Background, Text Color, and the Active Row Background.
    
-   **Border Radius:** Adjust the outer playlist curves to be sharp, slightly rounded, or heavily rounded to match your site's vibe.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-kbbbd24j-gh7bQJ8hsaRbDD3SAWjsoTx49X0R27)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-kbbbd24j-TnKsyj8MUi1WwBPPkFM1zDRjSfrPbJ)

## Rank history [How rankings work →](/terms#rankings)

-   All · #7658

## Details

- **Author**: Ismoil Safarov
- **Price**: $3.00
- **Published**: 2026-03-23
- **Updated**: 2026-04-28
- **Added**: 2026-03-12
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.