Video Search

Use code NEW10 to receive 10% off on all my components.

Overview

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

How to get a YouTube API Key

• 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

Key Features

• 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.

Best For

• 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.