index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #showvideos
        {
            display: grid;
            grid-template-columns: repeat(4,20%);
            grid-gap: 5%;
        }


    </style>
</head>
<body>
    
    <h1> YouTube</h1>
    <input type="text" id="query">
    <button onclick="searchVideos()"> Search</button>

   <div id="showvideos"></div>
</body>
</html>
<script>


// https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=30&q=%202&key=[YOUR_API_KEY] 

// const APIconst API="AIzaSyDYMd_hPTEGHr827YHL7m9TA6cQHwcws8Q";

const API="AIzaSyDYMd_hPTEGHr827YHL7m9TA6cQHwcws8Q";

const searchVideos = async ()=>{
    try{
            const q=document.getElementById("query").value;

            const res=await fetch (`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=30&q=${q}%202&key=${API}`);

            
            const data= await res.json();

            append(data.items)
            // console.log(data.items)
                // console.log(res)
    }catch(err){
        console.log(err);
    }
};

const append=(videos)=>{
    let showvideos = document.getElementById("showvideos");

    showvideos.innerHTML=null;
    videos.forEach(({id:{videoId},snippet:{title}})=>{

        let div=document.createElement("div");

        let iframe=document.createElement("iframe");

        iframe.src=`https://www.youtube.com/embed/${videoId}`
        iframe.width="100%";
        iframe.height="100%";
        iframe.allow="fullscreen";


        let name=document.createElement("h5");
        name.innerText=title;

        div.append(iframe,name);
        let data={
            title,
            videoId
        }

        div.onclick=()=>
        {
            showvid(data);
        }
        showvideos.append(div);

    })
}
   const showvid=(x)=>{
       window.location.href="video.html"
       localStorage.setItem("video",JSON.stringify(x))
   }
</script>

<!-- <iframe width="560" 
height="315"
 src="https://www.youtube.com/embed/7pwiY5T4IYw"
  title="YouTube video player" 
  frameborder="0"
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
   allowfullscreen></iframe> -->