Hide Video Controls Until User Hover Over Video

Question 1

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

$('#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

Question 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");
    }
});

Question 3

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>

Question 4

<script>
function setupVideos() {
  for (const video of document.querySelectorAll('video')) {
    video.controls = false
    video.addEventListener('mouseover', () => { video.controls = 'controls' })
    video.addEventListener('mouseout', () => { video.controls = false })
  }
}
window.addEventListener('load', setupVideos, false)
</script>

Question 5

Using the code below, you don't need a separate javascript section (if that is a concern, which is the case sometimes). Just simply use onmouseover="this.play();this.setAttribute('controls','controls')" and onmouseout="this.load();this.removeAttribute('controls')"

If you don't want it to reset to a poster image, then you can get rid of the this.load.

<div class="img_placeholder">
         <video width="350" height="250" loop preload="none" poster="../assets/icon-32.png" onmouseover="this.play();this.setAttribute('controls','controls')" onmouseout="this.load();this.removeAttribute('controls')">
         <source src="../assets/bear.mp4" type="video/mp4" />
         Your browser does not support the video tag.
         </video>
    </div>

Question 6

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!