JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video reveal </title>
    <link rel="stylesheet" href="styles.css">

</head>
<body>
    <div class="parent">
        <div id="videohere">
        <iframe class="video hide" width="560" height="315" src="https://www.youtube.com/embed/q3WC-X7xDNo?si=E9MI_wcGtmrNyx3J&1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
            

        <div id="button" onclick="this.remove();showHide();">
        </div>    
       
        
    </div>
    <script src="index.js"></script>
    
</body>
</html>

CSS

*{
    padding:0;
    margin:0;
}

.parent{
    width:100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.video{
    border-radius: 20px;
    z-index: 1; 
    
}


.hide{
    display: none;
}
#button{
    width:200px;
    height:200px;
    position: absolute;
    background-color:orange; 
    border-radius: 20px;
    z-index: 2; 
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

JavaScript

let video = document.querySelector (".video");
//video.classList.toggle("hide");

function showHide(){
    video.classList.toggle("hide");
}