CSS pointer events and spacebar

Question

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

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>

What system are you running on because I cannot reproduce this (using Windows11 Edge, tried both in an SO snippet and as raw code)? — A Haworth
– A Haworth, Commented Aug 18, 2024 at 14:36
@AHaworth You need to press on the play button on the video, and then press the spacebar right after that. Me here on Windows11 Edge, too. — iorgu
– iorgu, Commented Aug 18, 2024 at 15:48

asgarov · Accepted Answer · 2024-08-18 13:36:17Z

1

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

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

answered Aug 18, 2024 at 13:36

616 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

In the end I decided to remove focus: document.activeElement.blur();