Html video show controls on hover

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 one video.

HTML:

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

hooman

5166 silver badges20 bronze badges

asked Apr 24, 2014 at 21:10

6

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

answered Apr 24, 2014 at 21:26

EnigmaRMEnigmaRM

7,39311 gold badges44 silver badges72 bronze badges

10

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

answered Apr 30, 2015 at 18:05

rickcnagyrickcnagy

1,74418 silver badges23 bronze badges

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>

answered Apr 24, 2014 at 21:18

Sean BrightSean Bright

116k17 gold badges135 silver badges143 bronze badges

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>

answered Feb 21, 2021 at 3:58

danijardanijar

30.8k40 gold badges152 silver badges281 bronze badges

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>

answered Aug 26 at 6:19

Joseph AstrahanJoseph Astrahan

8,18511 gold badges76 silver badges148 bronze badges

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!

answered Apr 24, 2014 at 21:13

3066d03066d0

1,77513 silver badges18 bronze badges

2

How do I show the controls of a video in HTML?

How do I hide controls in HTML video?

Which attribute is used to add video control in HTML?

How do I present a video in HTML?