← Tutti gli articoli

Tutorial

Forza i controlli nativi su ogni video

17 maggio 2026 · di JustZix Team

I lettori video personalizzati sembrano eleganti finché non si rompono: una barra di scorrimento mancante, nessun cursore del volume, un pulsante play che ignora i clic. Il browser fornisce gratis una barra di controllo affidabile. Una regola JustZix la forza su ogni video così hai sempre controlli funzionanti.

L'unica proprietà che conta

Ogni elemento <video> ha una proprietà booleana controls. Quando è vera, il browser disegna la sua barra di controllo. I siti la disabilitano così la loro interfaccia personalizzata può prendere il controllo. Riattivala:

document.querySelectorAll('video').forEach(function (v) {
  v.controls = true;
});

Questo è il nucleo. Le ricette qui sotto la fanno restare sulle pagine dinamiche e impediscono al sito di rimuoverla di nuovo.

Mantieni i controlli sui lettori dinamici

Molti siti disattivano controls dopo il caricamento della pagina, oppure sostituiscono del tutto l'elemento video. Un MutationObserver che sorveglia sia i nuovi nodi sia i cambi di attributo mantiene la tua impostazione al suo posto.

(function () {
  function force(v) {
    if (v.controls !== true) { v.controls = true; }
  }
  function scan(root) {
    if (root.tagName === 'VIDEO') { force(root); }
    if (root.querySelectorAll) {
      root.querySelectorAll('video').forEach(force);
    }
  }
  scan(document.documentElement);
  new MutationObserver(function (records) {
    records.forEach(function (rec) {
      if (rec.type === 'attributes' && rec.target.tagName === 'VIDEO') {
        force(rec.target);
      }
      rec.addedNodes.forEach(function (n) {
        if (n.nodeType === 1) { scan(n); }
      });
    });
  }).observe(document.documentElement, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['controls']
  });
})();

L'attributeFilter restringe l'osservatore al solo attributo controls, così resta economico anche sulle pagine affollate.

Nascondi l'interfaccia personalizzata rotta con il CSS

Una volta visibile la barra nativa, l'overlay personalizzato del sito spesso si trova sopra e ruba i clic. Una piccola regola CSS può spostarlo. I controlli personalizzati di solito portano una classe o un attributo data prevedibile; ispeziona la pagina una volta e mira a esso.

.video-player .custom-controls,
[data-player-ui],
.vjs-control-bar {
  display: none !important;
}

video {
  pointer-events: auto !important;
}

Il secondo blocco riabilita i clic sul video stesso, nel caso il sito li avesse disabilitati così il suo overlay potesse catturare ogni interazione. Regola i selettori per abbinare il lettore con cui hai a che fare.

Un'azione combinata clic-per-correggere

Se vuoi i controlli nativi solo occasionalmente, associala a un tasto invece di eseguirla sempre. Questa regola ripristina i controlli ed elimina gli overlay che bloccano quando premi una scorciatoia.

document.addEventListener('keydown', function (e) {
  if (e.altKey && e.key.toLowerCase() === 'c') {
    document.querySelectorAll('video').forEach(function (v) {
      v.controls = true;
      v.style.pointerEvents = 'auto';
      v.style.zIndex = '2147483647';
      v.style.position = 'relative';
    });
  }
}, true);

Alzare lo z-index solleva il video sopra qualsiasi overlay così la sua barra di controllo riceve i clic.

Note pratiche

• I controlli nativi includono velocità, volume, schermo intero e picture-in-picture nella maggior parte dei browser, quindi una sola regola copre diverse esigenze.
• Se un sito usa un formato di streaming che il browser non può scorrere, la barra nativa riprodurrà e metterà in pausa comunque in modo affidabile.
• Tieni il JS e il CSS come due metà della stessa regola JustZix limitata allo stesso pattern URL.

Trova una versione confezionata nei nostri esempi pronti all'uso oppure scarica JustZix. Per andare oltre con la velocità, leggi come controllare la velocità di riproduzione video ovunque.