Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>jutup</title>
        <meta charset="utf-8" />
        <style>
            #video {
                display: none;
            }
        </style>
        <!-- polyfill do IE -->
        <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
        <script src="fetch.umd.js"></script>
    </head>
    <body>
        <iframe id="video" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        <script>
            // const videoId = "gJjOLRouz7U";
            const videoId = "vHf8g-6HzaQ"; // działający livestream RP
            const apiKey = "AIzaSyBXh0AktpWSTtqt5gBLQSpEXDuMCqHtm4k"; // api key do zmiany bo na moim koncie
            let videoData = null;
            let isLive = false;
            let videoElement = document.getElementById("video");

            fetch("https://www.googleapis.com/youtube/v3/videos?id=" + videoId + "&key=" + apiKey + "&part=snippet&fields=items(id,snippet(liveBroadcastContent))")
                .then(function(response) {
                    return response.json();
                })
                .then(function(json) {
                        // console.log(json);
                        videoData = json;
                        isLive = videoData.items[0].snippet.liveBroadcastContent == "live" ? true : false;
                        if (isLive) {
                            videoElement.style.display = "block";
                            videoElement.src = "https://www.youtube.com/embed/" + videoId + "?&autoplay=1";
                        }
                    }
                );
        </script>
    </body>
</html>