This premium YouTube search component delivers a compact, card-style interface with glassmorphism aesthetics, live search powered by the YouTube Data API, and seamless video navigation. Designers get instant control over styling, fonts, colors, and content through intuitive Framer property panels, making it perfect for dashboards, portfolios, or content hubs without complex setup
Go to Google Cloud Console
Create or select a project
Enable YouTube Data API v3
Create an API key
Paste it into the API Key field in Framer Property Controls
Glassmorphism design with backdrop blurs, layered gradients, and soft shadows for a cutting-edge premium look
Live YouTube search fetching video titles, thumbnails, and descriptions with smooth loading animations
Clickable results that instantly open videos in new tabs for seamless user navigation
4 curated font styles (System, Inter, Poppins, Mono) selectable via segmented control
Fully editable welcome text, empty state messaging, and placeholder via property controls
Boolean toggle to show/hide the "Tip" pill badge in welcome state
Comprehensive Framer controls: header height, border radius, colors, gradients, and max results (1-10)
Responsive design that scales perfectly with Framer frame resizing
Smart states: welcome screen, empty results with custom orb icon, and scrollable video list
Hover effects on buttons and pointer cursor on clickable video items for intuitive UX.
Designers building modern dashboards, media hubs, or landing pages needing embedded video search
Framer users who want a plug-and-play, highly stylable YouTube search experience
Portfolios, SaaS apps, or content sites showcasing curated YouTube content in polished card UI.
Mohd Qasim
