How do reveal a hidden div onclick?

March 6, 2024

Hello all I have a square div with a hidden video file behind it. When the user clicks the square, the square gets removed and after

button.onclick = remove;

function remove(){
    this.remove();
    
}

let video = document.querySelector (".video");

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

*{
    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;
}

<!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">
        
            <iframe class="video hide" width="560" height="315" src="https://www.youtube.com/embed/q3WC-X7xDNo?si=E9MI_wcGtmrNyx3J" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

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

I want the video file to be revealed and autopay. I am currently using the toggle method to try to reveal the video but it is not working. Can anyone help?

>Solution :

button doesn’t appear to be defined. function remove seems to be trying to remove itself. But the problem is remove is not defined in button.onclick = remove; so it’s causing an error. Remove the erroneous and unused JS and it works fine. https://jsfiddle.net/ym6hoqnf/

let video = document.querySelector (".video");

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

Having it play is another matter. I think this works, but also the browser can stop it from playing.

function showHide(){
    video.classList.toggle("hide");
    var src = video.getAttribute('src');
    var autoplaySrc = src + '&autoplay=1';
    video.setAttribute('src', autoplaySrc);
}

Ideally you would use these docs and do it the best method https://developers.google.com/youtube/iframe_api_reference

Another option since you’re trying to replace the youtube play button is to show the video at 0 opacity over the top of your faux button, and when the user clicks the video, change the video to 100% opacity, making it appear is if they clicked your button, but they actually clicked on the video causing it to play.