← Todos los artículos

Tutoriales

Fuerza los controles nativos en cada vídeo

17 mayo 2026 · por JustZix Team

Los reproductores de vídeo personalizados se ven elegantes hasta que se rompen: una barra de progreso ausente, sin control de volumen, un botón de reproducción que ignora los clics. El navegador incluye una barra de control fiable gratis. Una regla de JustZix la fuerza en cada vídeo para que siempre tengas controles que funcionan.

La única propiedad que importa

Cada elemento <video> tiene una propiedad booleana controls. Cuando es verdadera, el navegador dibuja su propia barra de control. Los sitios la desactivan para que su interfaz personalizada pueda tomar el relevo. Vuelve a activarla:

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

Ese es el núcleo. Las recetas de abajo hacen que se mantenga en páginas dinámicas e impiden que el sitio la vuelva a quitar.

Mantener los controles en reproductores dinámicos

Muchos sitios desactivan controls después de que la página carga, o sustituyen el elemento de vídeo por completo. Un MutationObserver que vigila tanto los nodos nuevos como los cambios de atributo mantiene tu ajuste en su sitio.

(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']
  });
})();

El attributeFilter estrecha el observador solo al atributo controls, así que se mantiene barato incluso en páginas ocupadas.

Ocultar la interfaz personalizada rota con CSS

Una vez que la barra nativa es visible, la superposición personalizada del sitio a menudo se queda encima y roba los clics. Una pequeña regla CSS puede quitarla de en medio. Los controles personalizados suelen llevar una clase o atributo de datos predecible; inspecciona la página una vez y apunta a ello.

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

video {
  pointer-events: auto !important;
}

El segundo bloque reactiva los clics en el propio vídeo, por si el sitio los desactivó para que su superposición pudiera capturar cada interacción. Ajusta los selectores para que coincidan con el reproductor con el que tratas.

Una acción combinada de clic para arreglar

Si solo quieres controles nativos ocasionalmente, asóciala a una tecla en lugar de ejecutarla siempre. Esta regla restaura los controles y limpia las superposiciones que bloquean cuando pulsas un atajo.

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);

Subir el z-index eleva el vídeo por encima de cualquier superposición para que su propia barra de control reciba los clics.

Notas prácticas

• Los controles nativos incluyen velocidad, volumen, pantalla completa e imagen en imagen en la mayoría de los navegadores, así que una regla cubre varias necesidades.
• Si un sitio usa un formato de streaming que el navegador no puede recorrer, la barra nativa seguirá reproduciendo y pausando de forma fiable.
• Mantén el JS y el CSS como dos mitades de la misma regla de JustZix limitada al mismo patrón de URL.

Encuentra una versión empaquetada en nuestros ejemplos listos para usar o descarga JustZix. Para ir más allá con la velocidad, lee controla la velocidad de reproducción de vídeo en cualquier sitio.