Show video player controls only on mouseover

JavaScript
1

I’m using the Mediaelements.js Wordpress plugin on my website. The default settings (Chrome and Firefox, but not IE9) show the control bar on the player when the page loads. After clicking start, the control bar only becomes visible on mouseover. As far as I can tell the following snippet is what controls this function. Can someone tell me how to edit it so that the control bar is hidden at all times unless a user hovers over the player?

    doAnimation = typeof doAnimation == 'undefined' || doAnimation;

    if (t.controlsAreVisible)
        return;

    if (doAnimation) {
        t.controls
            .css('visibility','visible')
            .stop(true, true).fadeIn(200, function() {
                  t.controlsAreVisible = true;
                  t.container.trigger('controlsshown');
            });
2

Try adding this to your CSS:

.mejs-container .mejs-controls{
  /* other rules */
  visibility: hidden;
}

http://stackoverflow.com/questions/5511583/how-to-hide-the-control-in-the-player-using-mediaelementjs-com

3

Thanks for the suggestion but that didn’t work. I want the controls to be hidden when the page loads and to become visible when hovering over the video. I think the javascript will need to be modified rather than just adding some extra css rules.

4

Can you post a link to a page where we can see this?

5

The visibility hidden rule has already been declared and is working properly in IE9 but not in Chrome and Firefox. http://rank1stseo.co.nz

6

I don’t think that’s anything to do with the Mediaelements.js Wordpress plugin, rather the browser’s native behaviour.

Maybe you could do something like this:

var video = document.getElementById("wp_mep_1");

$(video).on({
    mouseenter: function () {
      video.setAttribute("controls","controls")
    },
    mouseleave: function () {
      video.removeAttribute("controls");
    }
});

Demo

7

Hi, the demo looks good. That’s exactly what I’m looking for. Do I need to replace any of the currently existing code or just add the new code to it?

8

Ideally, just add it to your existing code.
I’m not sure how Mediaelements.js fits into things, but it should hopefully be straightforward.

9

I tried adding the script to the footer but it’s still not working.

10

If you open the page in your browser’s console (F12 > Console), you see the following error:

Uncaught SyntaxError: Invalid regular expression: missing / (index):179

This refers to this:

jQuery(document).ready(function($) {
	$('#wp_mep_1').mediaelementplayer({
		m:1</p>
<p>		,features: ['playpause','current','progress','duration','volume','tracks','fullscreen']</p>
<p>	});
});

I’m assuming that WP has inserted those <p> tags in there.

I know this isn’t directly related to the other code, but an uncaught SyntaxError will stop execution and nothing will run.

11

Any idea how to correct this?

12

How are you adding that script currently? It would be better to keep it at the bottom of the page with the other scripts.

13

If I can fix the problem with the <p> tags then hopefully it will then be working the way I want it to.

14

Not really.
Try adding it to the bottom of the page as Ralph suggests, make sure you are in text view in WP and avoid line breaks.

15

Still can’t get it to work. Might go back to using Vimeo or Youtube, at least there’s more cross browser consistency. Thanks for your help.