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" onmouseover="hideControls()"
title="to do list">
<source src="toDoListVideo.mov" class="project">
</video>I am not sure, but I belive that you have <video controls>, but you need <video controle="False">
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" onmouseover="hideControls()"
title="to do list">
<source src="toDoListVideo.mov" class="project">
</video>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" onmouseover="hideControls()" onmouseout="showControls()"
title="to do list">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" class="project">
</video>