Hide Video Controls Until User Hover Over Video

Question

i\'m trying to hide the video controls on my video, until the user hover over the video, then the controls shows up. Any idea or advice? Thanks. And I\'ve got more than

Answer 1

We can accomplish this through just a couple lines of jQuery, making use of .hover():

Working Example

$('#myvideo').hover(function toggleControls() { if (video.hasAttribute("controls")) { video.removeAttribute("controls") } else { video.setAttribute("controls", "controls") } })

Edit I mistakenly left the variable video in the code above. I changed it to this so that you won't have to manage variables that grab an ID.

$('#myvideo').hover(function toggleControls() {
    if (this.hasAttribute("controls")) {
        this.removeAttribute("controls")
    } else {
        this.setAttribute("controls", "controls")
    }
})

HTML

<video width="300" height="auto" id="myvideo">
    <source src="#" type="video/mp4" />
</video>

---

Update: You mentioned that you have several videos. So you can use this same logic, and just add additional selectors into $( ). Here's an example:

$('#yourID1, #yourID2, #yourID3').hover(function toggleControls() { ...

Doing that will listen or wait until it detects that you're hovering over one of those IDs.

Updated fiddle

Answer 2

One issue with @EnigmaRM's answer is that if jQuery somehow misses a hover event, the controls can be toggled the "wrong" way - that is, they disappear on mouse enter and reappear on mouse leave.

Instead, we can ensure that the controls always appear and disappear correctly with event.type:

$("#myvideo").hover(function(event) {
    if(event.type === "mouseenter") {
        $(this).attr("controls", "");
    } else if(event.type === "mouseleave") {
        $(this).removeAttr("controls");
    }
});

Answer 3

A previous post explained how to do it this way HTML5 video - show/hide controls programmatically

<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

<script>
var video = document.getElementById("myvideo");

function toggleControls() {
  if (video.hasAttribute("controls")) {
     video.removeAttribute("controls")   
  } else {
     video.setAttribute("controls","controls")   
  }
}
</script>

Check if their solution works for you! Please +1 them if so!

Answer 4

Untested, but I believe this would work. It uses JavaScript instead of CSS.

<div class="item spoon burger"><video id="videoElement" width="300" height="auto"><source src="videos/sruthi.mp4" type="video/mp4"></video></div>

<script type="text/javascript">
    (function(window) {
        function setupVideo()
        {
            var v = document.getElementById('videoElement');
            v.addEventListener('mouseover', function() { this.controls = true; }, false);
            v.addEventListener('mouseout', function() { this.controls = false; }, false);
        }

        window.addEventListener('load', setupVideo, false);
    })(window);
</script>