ZabdiBen/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Video Search</title>
</head>
<body>
    <h1>YouTube Video Search</h1>

    <label for="searchQuery">Search Query:</label>
    <input type="text" id="searchQuery" placeholder="Enter your search query">
    <button onclick="searchYouTube()">Search</button>

    <h2>Results:</h2>
    <ul id="results"></ul>

    <script>
        // Set your YouTube API key here
        const apiKey = 'AIzaSyA3sMiBdsoqyH9BNbMJoo4YktStbdBF15g';

        async function searchYouTube() {
            const searchQuery = document.getElementById('searchQuery').value;

            const apiUrl = `https://www.googleapis.com/youtube/v3/search?q=${searchQuery}&part=snippet&maxResults=10&key=${apiKey}`;

            try {
                const response = await fetch(apiUrl);
                const data = await response.json();

                const resultsContainer = document.getElementById('results');
                resultsContainer.innerHTML = '';

                data.items.forEach(item => {
                    const videoId = item.id.videoId;
                    const title = item.snippet.title;
                    const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;

                    const listItem = document.createElement('li');
                    listItem.innerHTML = `
                        <strong>${title}</strong> - <a href="${videoUrl}" target="_blank">${videoUrl}</a>
                        <br>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
                    `;
                    resultsContainer.appendChild(listItem);
                });
            } catch (error) {
                console.error('Error fetching YouTube data:', error);
            }
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>YouTube Video Search</title>
	</head>
	<body>
	<h1>YouTube Video Search</h1>

	<label for="searchQuery">Search Query:</label>
	<input type="text" id="searchQuery" placeholder="Enter your search query">
	<button onclick="searchYouTube()">Search</button>

	<h2>Results:</h2>
	<ul id="results"></ul>

	<script>
	// Set your YouTube API key here
	const apiKey = 'AIzaSyA3sMiBdsoqyH9BNbMJoo4YktStbdBF15g';

	async function searchYouTube() {
	const searchQuery = document.getElementById('searchQuery').value;

	const apiUrl = `https://www.googleapis.com/youtube/v3/search?q=${searchQuery}&part=snippet&maxResults=10&key=${apiKey}`;

	try {
	const response = await fetch(apiUrl);
	const data = await response.json();

	const resultsContainer = document.getElementById('results');
	resultsContainer.innerHTML = '';

	data.items.forEach(item => {
	const videoId = item.id.videoId;
	const title = item.snippet.title;
	const videoUrl = `https://www.youtube.com/watch?v=${videoId}`;

	const listItem = document.createElement('li');
	listItem.innerHTML = `
	<strong>${title}</strong> - <a href="${videoUrl}" target="_blank">${videoUrl}</a>
	<br>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
	`;
	resultsContainer.appendChild(listItem);
	});
	} catch (error) {
	console.error('Error fetching YouTube data:', error);
	}
	}
	</script>
	</body>
	</html>