WordPress: deshabilite y oculte todos los controles en el video

¿Cómo deshabilitar y ocultar todos los controles en los videos de WordPress 4.6.1?

Siguiendo mi código real dentro de una página de WordPress:

Hola, debe anular los estilos en línea aplicados a .mejs-controls div para ese shortcode de video. Puedes:

.mejs-controls {
  display: none !important;
  visibility: hidden !important;
  }

Estos controles normalmente solo se muestran al pasar el mouse, a menos que les indique lo contrario. Le preguntaría por qué desea deshabilitar los controles, quitarle esta capacidad al usuario puede hacer que se sienta frustrado con esta restricción.

Encontré un poco más de información aquí en esta publicación: https://wordpress.stackexchange.com/questions/130402/hide-default-video-shortcode-controls-on-pageload

El método que no es CSS es agregar un filtro a la salida de su shortcode. Pon esto en tu functions.php archivo de tema:

add_filter( 'wp_video_shortcode', function( $output ) {
    $output = str_replace( 'controls="controls"', '', $output );
    return $output;
} );

que reemplaza a la controls="controls" atributo en la cadena con un espacio en blanco para omitir la función.

No creo que sea una mala experiencia de usuario cuando son videos de fondo o un pequeño bucle de 2 a 3 segundos, ya que los videos HTML5 están reemplazando a los GIF y ahora tienen soporte de reproducción automática para teléfonos/tabletas cuando están silenciados.

Esto también podría ser útil, ocultará todos los controles hasta que desplaces el video:

.mejs-controls {
  opacity: 0!important;
  transition: all 0.5s ease;
}

.mejs-container:hover .mejs-controls {
  opacity: 1!important;
}

.mejs-overlay-button{
  display: none !important;
  visibility: hidden !important;
}