Open embedded YouTube video in new window in a div

Question

I have a homepage with a selection of thumbnails, which should open the corresponding video when clicked. I want to make it so that when I click a thumbnail, the video opens in a new window on one half (the other half is for something else).

I thought I could use JavaScript to do this, but I get the error “VidContainer is null” on line 46 of my JS script.

HTML for homepage:

<html>
    <head>
        <title>YouTube API</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
        <div class="header">
            <br>
            <h1>YouTube API Search</h1>
        
                <div class="search-bar">
                    <input type="text" id="search" placeholder="Search for videos">
                    <input type = "image" src = "search.png" id = "search-button"></button>
                </div>

                <div id="keywordPopup" class="popup" style="display: none;">
                    <br>
                    <input type="text" id="customKeyword" placeholder="Enter custom keyword">
                    <button id="submitKeyword">Submit</button>
                    <button id="cancelKeyword">Cancel</button>
                </div>

            <div class = "addKeyword">
                <button id="addKeywordButton" class="add-button">+</button>
            </div>
            <div class="category-buttons">
                <button class="category-button" data-category="Software Quality Assurance">Software Quality Assurance</button>
                <button class="category-button" data-category="Computing">Computing</button>
            </div>
        </div>
        <div class = "content">
            <br>
            <div class="row">
                <div class="col-md-12">
                    <div id="videos"></div>
                </div>
            </div>
        </div>
       
        <div id="loading" style="display: none">
            <p>Loading...</p>
        </div>

        <div id="error" style="display:none">
            <p>An error occurred while fetching videos.</p>
        </div>

        <div id="videoScreen" class="screen">
            <div class="screen-content">
                <span class="close" onclick="closeVideo()">&times;</span>
                <iframe id="videoFrame" width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
                <div id="fb-root"></div>
                <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v18.0" nonce="wykFjTT7"></script>
                <input type = "image" style="width:60px;height:60px;" src = "save.png" onclick = "openNW()" id = "download"></button>
                <input type="image" style="width:60px;height:60px;" src = "2023_Facebook_icon.png" onclick="location.href="https://www.facebook.com/sharer/sharer.php?u=example.org";" id = "fb-share" /></button>
                <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world"><img src="X.png" width="60px" height="60px"></a>
            </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="ytsearch.js"></script>
    </body>
</html>

HTML for new window:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedded YouTube Video</title>
</head>
<body>
    <div id="vid-container">
        <div id="player"></div>
    </div>
    <script src="https://www.youtube.com/iframe_api"></script>
    <script src = "ytsearch.js"></script>
</body>
</html>

JS script (relevant section):

    function videoSearch(key, search, maxResults, videoDuration) {
        $("#videos").empty();
        $.get("https://www.googleapis.com/youtube/v3/search?key=" + key
        + "&type=video&part=snippet&maxResults=" + maxResults + "&q=" + search + "&videoDuration=" + videoDuration, 
        function(data){
            var videosContainer = $("<div class="row"></div>");
            console.log(data);
            data.items.forEach(function (item, index) {
                var videoColumn = $("<div class="col-md-4"></div>");
                var videoContainer = $("<div class="video-container"></div>");
        
                // Create an image or link to represent the video thumbnail and trigger the pop-up
                var thumbnail = $("<img src="https://stackoverflow.com/questions/77465719/" + item.snippet.thumbnails.medium.url + "" alt="Video Thumbnail">");
                thumbnail.on("click", function () {
                        //window.open("http://www.youtube.com/embed/" + item.id.videoId, "height=100, width=100");
                        var vidContainer = document.getElementById("vid-container");
                        vidContainer.player.innerHTML = 
                        `<iframe src = "https://www.youtube.com/embed/" + item.id.videoId frameborder = "0" allowfullscreen></iframe>`
                        window.open("file.html");
                });

How can I fix the error and have it open in the new window?

Thank you!

Leave a Comment Cancel reply