Okay, let's start building a simple YouTube-like interface that uses the YouTube Data API to search for videos. This initial setup will include the basic HTML structure, CSS for styling, and JavaScript to handle the search input and display results. You will need to obtain a YouTube Data API key from the Google Cloud Console and insert it into the JavaScript code. Mini YouTube

Mini YouTube

body { font-family: Arial, sans-serif; margin: 0; background-color: #f9f9f9; } header { background-color: #ff0000; padding: 10px 20px; color: white; display: flex; align-items: center; justify-content: space-between; } header h1 { margin: 0; font-size: 1.5em; } .search-container { display: flex; } #search-input { padding: 8px; border: 1px solid #ccc; border-radius: 2px 0 0 2px; min-width: 300px; } #search-button { padding: 8px 15px; border: 1px solid #ccc; border-left: none; background-color: #f1f1f1; cursor: pointer; border-radius: 0 2px 2px 0; } #search-button:hover { background-color: #e0e0e0; } #results-container { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .video-item { background-color: white; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.2s ease; } .video-item:hover { transform: translateY(-5px); } .video-item img { width: 100%; height: auto; display: block; } .video-item h3 { font-size: 0.9em; margin: 10px; color: #333; /* Simple truncation for long titles */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } const searchInput = document.getElementById('search-input'); const searchButton = document.getElementById('search-button'); const resultsContainer = document.getElementById('results-container'); // --- IMPORTANT --- // Replace 'YOUR_API_KEY' with your actual YouTube Data API key const API_KEY = 'YOUR_API_KEY'; // --- IMPORTANT --- const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3/search'; async function searchVideos(query) { if (!API_KEY || API_KEY === 'YOUR_API_KEY') { resultsContainer.innerHTML = '

Please add your YouTube API Key in script.js

'; console.error('API Key is missing. Please replace YOUR_API_KEY in script.js'); return; } resultsContainer.innerHTML = '

'; // Show loading indicator const params = new URLSearchParams({ part: 'snippet', q: query, key: API_KEY, type: 'video', maxResults: 12, // Number of results to fetch }); try { const response = await fetch(`${YOUTUBE_API_URL}?${params}`); if (!response.ok) { const errorData = await response.json(); throw new Error(`API Error (${response.status}): ${errorData.error.message}`); } const data = await response.json(); displayResults(data.items); } catch (error) { console.error('Error fetching videos:', error); resultsContainer.innerHTML = `

Error fetching videos: ${error.message}

`; } } function displayResults(videos) { resultsContainer.innerHTML = ''; // Clear previous results or loading message if (!videos || videos.length === 0) { resultsContainer.innerHTML = '

No videos found.

'; return; } videos.forEach(video => { const videoId = video.id.videoId; const title = video.snippet.title; const thumbnailUrl = video.snippet.thumbnails.medium.url; // Use medium quality thumbnail const videoElement = document.createElement('div'); videoElement.classList.add('video-item'); videoElement.innerHTML = `

${title}

`; // Add click listener to open video on YouTube videoElement.addEventListener('click', () => { window.open(`https://www.youtube.com/watch?v=${videoId}`, '_blank'); }); resultsContainer.appendChild(videoElement); }); } searchButton.addEventListener('click', () => { const query = searchInput.value.trim(); if (query) { searchVideos(query); } }); searchInput.addEventListener('keypress', (event) => { if (event.key === 'Enter') { const query = searchInput.value.trim(); if (query) { searchVideos(query); } } }); // Optional: Perform an initial search on load? // searchVideos('welcome'); **Next Steps:** 1. **Get API Key:** You need to get a YouTube Data API v3 key from the [Google Cloud Console](https://console.cloud.google.com/). Enable the "YouTube Data API v3" for your project and create credentials (API Key). 2. **Add API Key:** Open the `script.js` file and replace the placeholder `'YOUR_API_KEY'` with the actual key you obtained. 3. **Run:** After adding the key, you should be able to search for videos. Type a query in the search box and click "Search" or press Enter. The results will appear below. Clicking a video thumbnail will open it on YouTube in a new tab.