Question

There is custom html5 video player. It has control bar that hide on idle in fullscreen mode. I would like to hide a cursor too. I tried just apply .cursor = 'none' style to body. Chrome wait for mouse move after applying style. But it works good in Firefox. By the way Youtube flash player hide cursor, but not Youtube html5 player.

You can check this here – http://jsfiddle.net/xAfUm/1/

What can I do with it?

Answer 1

You may need to set your cursor to a transparent 1×1 image.

You can either create a transparent gif beforehand

document.body.style.cursor = "url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), pointer";

or use canvas to create one on the fly

    var tmpCanvas = document.createElement("canvas");
    tmpCanvas.setAttribute("width",1);
    tmpCanvas.setAttribute("height",1);

    document.body.style.cursor = "url('"+tmpCanvas.toDataURL()+"'), pointer";

Both solutions seem to work in Firefox, but Chrome still shows a 1×1 black pixel

(transparent GIF shamelessly stolen from this post)