CODEWITHSUNDEEP
javascripthtmlcsspointer-events
Toniq
Toniq

Reputation: 5016

CSS pointer events and spacebar

When I add pointer-events:none; to video (just to temporarily disable controls), if focus is on play button, spacebar still triggers play.

  1. is this intended behavior?

  2. what would be the cleanest to prevent this? (possible without javascript?)

To replicate, on page load, click play video to get focus, wait few seconds for pointer-events then use spacebar.

setTimeout(function(){

document.getElementById('video').classList.add('disabled')
},4000)
.disabled{
  pointer-events:none;
}
<video controls id="video">
<source src="http://media.w3.org/2010/05/sintel/trailer.mp4">
</video>

Upvotes: 0

Views: 47

Answers (1)

asgarov
asgarov

Reputation: 61

What comes to my mind is also removing controls when disabling the video:

document.getElementById("video").attributes.removeNamedItem("controls");

Upvotes: 1

Related Questions