How do I make a search function with YouTube API?

I hope your day was beautiful! Today I started to make a Youtube Site in the Design of 2012. So and yes the website looks good and I can display the most popular videos but now I want to have a search function that should function like this:

The Website

On the top of the search bar and want that if I put a keyword into the search bar and click the search button, the Videos that are displayed below the head should be replaced with the videos that I searched. I searched for a long time since the beginning of the day and I still didn't find any answers. So what I want is:

searchbarinput = qsearch_http = "youtubeapisearchurl/search?"document.querySelector(.searchbar)--somehow use the input to search --

This is my current code of the website JS:

 const searchInput = document.querySelector('.ytvidsearch');        const searchBtn = document.querySelector('.searchbtn');        const videoCardContainer = document.querySelector('.recommendedvideos');        let api_key = "removed by editor";        let video_http = "https://www.googleapis.com/youtube/v3/videos?";        let channel_http = "https://www.googleapis.com/youtube/v3/channels?";        let search_http = "https://www.googleapis.com/youtube/v3/search"        fetch(video_http + new URLSearchParams({            key: api_key,            chart: 'mostPopular',            part: 'snippet,contentDetails,statistics,id',            maxResult: 10,            regionCode: 'DE'        }))        .then(res => res.json())        .then(data => {            console.log(data);            data.items.forEach(item => {                getChannelIcon(item)            })        })        .catch(err => console.Log(err));        const getChannelIcon = (video_data) => {            fetch(channel_http + new URLSearchParams({                key: api_key,                part: 'snippet,contentDetails,statistics,id',                id: video_data.snippet.channelId,                maxResult: 10            }))            .then(res => res.json())            .then(data => {                video_data.channelThumbnail = data.items[0].snippet.thumbnails.default.url;                makeVideoCard(video_data);            })        }        const makeVideoCard = (data) => {            videoCardContainer.innerHTML += `<div class="video" onclick="#"><img src="${data.snippet.thumbnails.high.url}" class="thumbnail" alt=""><div class="content"><div class="info"><a href="#" class="title">${data.snippet.title}</a><a href="#" class="channelname">${data.snippet.channelTitle} uploaded</a><p class="description">${data.snippet.description}</p><p class="viewcount">${data.statistics.viewCount} views</p><img src="${data.channelThumbnail}" class="channelicon"></div></div><div class="spacer"></div></div>            `