Implementing a feature to browse or search YouTube directly within the page requires using the YouTube Data API v3. This allows searching for videos, but it requires an API key. **Important Considerations:** 1. **API Key:** You will need a YouTube Data API key from the Google Cloud Console. **Never embed your API key directly in client-side code that might be publicly accessible.** For this example, we'll add an input field for the user to enter their key temporarily, but this is not suitable for a production application. 2. **Ad Blocking:** Directly blocking ads using the official YouTube IFrame Player API is **not possible** and violates YouTube's Terms of Service. The method below uses the official player, which will include ads as determined by YouTube and the video creator. Circumventing ads often involves unofficial methods that are unreliable and may break. This setup provides search functionality but **does not block ads**. YouTube Viewer with Search

YouTube Viewer

YouTube Data API Key: Get one from Google Cloud Console. Key is stored locally for this session only.

Search Results

body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f4f4f4; margin: 0; } h1, h2 { color: #333; text-align: center; } input[type='text'], input[type='password'] { padding: 10px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px 15px; border: none; background-color: #cc0000; /* YouTube Red */ color: white; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; } button:hover { background-color: #a00000; } .api-key-container, .search-container { margin-bottom: 15px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; } .api-key-container label { font-weight: bold; } .api-key-container input { width: 300px; } .api-key-container small { width: 100%; text-align: center; color: #555; font-size: 0.8em; } .search-container input { width: 300px; } #results-container { width: 90%; max-width: 800px; margin-top: 20px; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } #results { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-top: 10px; max-height: 300px; /* Limit height and make scrollable */ overflow-y: auto; } .result-item { cursor: pointer; border: 1px solid #eee; border-radius: 4px; padding: 5px; transition: background-color 0.2s; text-align: center; font-size: 0.9em; } .result-item:hover { background-color: #f0f0f0; } .result-item img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 5px; } .result-item p { margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* Limit title to 2 lines */ -webkit-box-orient: vertical; } #player-container { width: 90%; max-width: 800px; aspect-ratio: 16 / 9; background-color: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin-top: 20px; } #player { width: 100%; height: 100%; } // In a real app, NEVER store API keys here. // This is just for demonstration with user input. let apiKey = ''; export function setApiKey(key) { apiKey = key.trim(); // Optionally store in sessionStorage for the session duration try { sessionStorage.setItem('youtubeApiKey', apiKey); } catch (e) { console.warn('Could not save API key to sessionStorage.'); } } export function getApiKey() { if (!apiKey) { try { apiKey = sessionStorage.getItem('youtubeApiKey') || ''; } catch (e) { console.warn('Could not retrieve API key from sessionStorage.'); } } return apiKey; } import { getApiKey } from './config.js'; const YOUTUBE_API_BASE_URL = 'https://www.googleapis.com/youtube/v3/search'; export async function searchVideos(query, maxResults = 10) { const apiKey = getApiKey(); if (!apiKey) { throw new Error( 'API Key not set. Please enter your YouTube Data API Key.' ); } const params = new URLSearchParams({ part: 'snippet', q: query, type: 'video', maxResults: maxResults, key: apiKey, }); try { const response = await fetch(`${YOUTUBE_API_BASE_URL}?${params}`); if (!response.ok) { const errorData = await response.json(); console.error('YouTube API Error:', errorData); throw new Error( `YouTube API request failed: ${ errorData.error?.message || response.statusText }` ); } const data = await response.json(); return data.items || []; // Return items array or empty array } catch (error) { console.error('Error fetching search results:', error); throw error; // Re-throw the error to be caught by the caller } } import { loadVideoById } from './player.js'; const resultsDiv = document.getElementById('results'); const resultsContainer = document.getElementById('results-container'); export function displayResults(items) { clearResults(); if (!items || items.length === 0) { resultsDiv.innerHTML = '

No results found.

'; resultsContainer.style.display = 'block'; // Show container even if no results return; } items.forEach((item) => { const videoId = item.id.videoId; const title = item.snippet.title; const thumbnailUrl = item.snippet.thumbnails.default.url; const resultItem = document.createElement('div'); resultItem.classList.add('result-item'); resultItem.dataset.videoId = videoId; // Store video ID const img = document.createElement('img'); img.src = thumbnailUrl; img.alt = title; const titlePara = document.createElement('p'); titlePara.textContent = title; resultItem.appendChild(img); resultItem.appendChild(titlePara); resultItem.addEventListener('click', () => { loadVideoById(videoId); }); resultsDiv.appendChild(resultItem); }); resultsContainer.style.display = 'block'; // Ensure container is visible } export function clearResults() { resultsDiv.innerHTML = ''; // Optionally hide container if you prefer // resultsContainer.style.display = 'none'; } export function showApiError(message) { clearResults(); // Clear previous results resultsDiv.innerHTML = `

Error: ${message}

`; resultsContainer.style.display = 'block'; } let player; // YT.Player instance // Called automatically by the IFrame Player API script window.onYouTubeIframeAPIReady = function () { console.log('YouTube IFrame API Ready'); // Player will be created on demand when a video is selected }; function createPlayer(videoId) { // Ensure the previous player instance (if any failed) is cleared const playerElement = document.getElementById('player'); if (playerElement) { playerElement.innerHTML = ''; // Clear previous content if any } try { player = new YT.Player('player', { height: '100%', width: '100%', videoId: videoId, playerVars: { playsinline: 1, autoplay: 1, // origin: window.location.origin // Might be needed depending on environment }, events: { onReady: onPlayerReady, onError: onPlayerError, }, }); } catch (error) { console.error('Error creating YouTube player:', error); alert('Failed to create YouTube player. Check console for details.'); player = null; // Reset player variable on creation error } } export function loadVideoById(videoId) { if (!videoId) { console.error('No video ID provided to load.'); return; } // Check if YT API is ready if (typeof YT === 'undefined' || typeof YT.Player === 'undefined') { console.warn('YT API not ready, trying again shortly...'); setTimeout(() => loadVideoById(videoId), 500); // Retry after delay return; } if (player && typeof player.loadVideoById === 'function') { console.log(`Loading video: ${videoId}`); player.loadVideoById(videoId); } else { console.log(`Creating player for video: ${videoId}`); createPlayer(videoId); } } function onPlayerReady(event) { console.log('Player ready'); // event.target.playVideo(); // Autoplay is handled by playerVars } function onPlayerError(event) { console.error('YouTube Player Error:', event.data); let errorMessage = 'An error occurred with the YouTube player.'; // Basic error descriptions (can be expanded) switch (event.data) { case 2: errorMessage = 'Invalid video ID or player parameters.'; break; case 5: errorMessage = 'An error occurred within the HTML5 player.'; break; case 100: errorMessage = 'Video not found or removed.'; break; case 101: case 150: errorMessage = 'Playback prohibited by video owner.'; break; default: errorMessage = `Player Error Code: ${event.data}`; } // Display error message within the player area const playerElement = document.getElementById('player'); if (playerElement) { playerElement.innerHTML = `

${errorMessage}

`; } // Reset player variable so a new one can be created if user tries again player = null; } import { setApiKey, getApiKey } from './config.js'; import { searchVideos } from './api.js'; import { displayResults, clearResults, showApiError } from './ui.js'; const apiKeyInput = document.getElementById('apiKey'); const searchQueryInput = document.getElementById('searchQuery'); const searchButton = document.getElementById('searchButton'); // Load API key from sessionStorage on startup if available apiKeyInput.value = getApiKey(); // Update API key in config when input changes apiKeyInput.addEventListener('change', () => { setApiKey(apiKeyInput.value); }); async function performSearch() { const query = searchQueryInput.value.trim(); const currentApiKey = getApiKey(); // Use the getter to ensure we have the latest if (!currentApiKey) { alert('Please enter your YouTube Data API Key first.'); apiKeyInput.focus(); return; } if (!query) { alert('Please enter a search query.'); searchQueryInput.focus(); return; } clearResults(); // Clear previous results immediately results.innerHTML = '

Searching...

'; // Provide feedback try { const items = await searchVideos(query); displayResults(items); } catch (error) { console.error('Search failed:', error); // Display the error message in the results area showApiError(error.message || 'Could not fetch search results.'); } } searchButton.addEventListener('click', performSearch); searchQueryInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { performSearch(); } }); // Initial setup: Hide results container until first search // document.getElementById('results-container').style.display = 'none'; // Or keep it visible but empty clearResults(); document.getElementById('results').innerHTML = '

Enter API Key and search above.

'; Remember to obtain a YouTube Data API v3 key and enter it into the designated input field. This setup allows searching and playing videos using the official YouTube player, which **will include ads**.