Disable a video in CSS

Question

I'm writing a browser extension that removes distractions from a page by injecting CSS, mostly in the form of display: none !important rules.

However, this site auto-plays video on loading, and I'm realizing that my usual CSS techniques don't work to keep that video from playing out loud; display: none; might effectively remove the element from interacting with the DOM, but that doesn't mean it's been destroyed or stopped.

Is there any way to stop or mute <video> elements using CSS, or should I look for a JavaScript solution?

Answer 1

There isn't a way to disable using css. You can do it in javascript like this.

const vids = document.querySelectorAll('video');
vids.forEach( x => x.removeAttribute('autoplay'));