trying to remove controls when I hover over video-CodePudding

I'm trying to remove my controls on my video to not show at all so that the video just plays on loop like a GIF without the controls ever displaying. Any suggestions P.s. please ignore the StackOverflow error when running snippet. thank you.

function hideControls() {
    document.getElementById('text');
    video.removeAttribute("controls");
    }

video {
    display:inline-block;
    margin: 25px;
    width: 280px;
    height: 280px;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0px 7px 8px  10px rgba(0, 255, 255, 0.328);
    
}
video:hover{
    width:290px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0px 7px  20px  25px rgba(247, 44, 234, 0.526);
    

}

<video id="text" controls loop autoplay="autoplay"  onm ouseover="hideControls()" 
        title="to do list">
            <source src="toDoListVideo.mov" >
        </video>

CodePudding user response：

I am not sure, but I belive that you have <video controls>, but you need <video controle="False">

CodePudding user response：

I removed the "controls" by removing the control word on HTML, like so: **Also note that setting controls="false" can't happen as it is a boolean variable and would have no value on HTML. Thank you for your help however. :D

<video id="text" loop autoplay="autoplay"  onm ouseover="hideControls()" 
        title="to do list">
            <source src="toDoListVideo.mov" >
        </video>

CodePudding user response：

Hope this helps

You forgot to store document.getElementById('text') into the variable video hence causing your issue

I also added a listener showControls that adds back the video controls on mouse out

function hideControls() {
    const video = document.getElementById('text');
    video.removeAttribute("controls");
}
 
function showControls() {
    const video = document.getElementById('text');
    video.setAttribute("controls", true);
}

video {
    display:inline-block;
    margin: 25px;
    width: 280px;
    height: 280px;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0px 7px 8px  10px rgba(0, 255, 255, 0.328);
    
}
video:hover{
    width:290px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0px 7px  20px  25px rgba(247, 44, 234, 0.526);
}

<video id="text" controls loop autoplay="autoplay" onm ouseover="hideControls()" onm ouseout="showControls()" 
        title="to do list">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" >
</video>