test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Gaming Live Streams</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .game {
            margin-bottom: 20px;
        }
        img {
            max-width: 100px;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Top Live Streaming Games on YouTube</h1>
    <div id="games-container"></div>

    <script>
        const apiKey = 'AIzaSyAKcrXlth6WWZNMq0VeXGysBG3jdrja4ts';
        const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&eventType=live&type=video&key=${apiKey}`;

        async function fetchLiveGames() {
            try {
                const response = await fetch(url);
                const data = await response.json();
                displayGames(data.items);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        function displayGames(games) {
            const container = document.getElementById('games-container');
            container.innerHTML = ''; // Clear previous content

            games.forEach(game => {
                const gameDiv = document.createElement('div');
                gameDiv.classList.add('game');
                gameDiv.innerHTML = `
                    <h2>${game.snippet.title}</h2>
                    <img src="${game.snippet.thumbnails.default.url}" alt="${game.snippet.title}">
                    <p>Channel: ${game.snippet.channelTitle}</p>
                `;
                container.appendChild(gameDiv);
            });
        }

        // Fetch live games on page load
        fetchLiveGames();
    </script>
</body>
</html>