Cómo quitar el enlace de descarga del reproductor de WordPress

Igual te has dado cuenta de que cuando insertas un audio en una entrada de tu sitio WordPress, si la estás viendo en el navegador Chrome, hay a la derecha unos puntitos que, al hacer clic, ofrecen un enlace para descargar el audio ¿y eso cómo se quita?

Pues, como resulta que el navegador utiliza su propio reproductor, tienes que modificar la etiqueta del audio en tu editor, para indicar al navegador que no ofrezca el control de descarga del audio. ¿Y cómo se hace?

Así…

Edita el bloque de audio como HTML haciendo clic en el menú de las opciones del bloque.

En el editor HTML que se mostrará añade el código controlslist="nodownload" como se indica en la captura, justo detrás de controls.

Y no te preocupes si el editor te muestra un error de HTML no válido. Dále sin problemas al botón de «Convertir a HTML»

Cuando guardes los cambios el reproductor de audio ya no ofrecerá el enlace de descarga, como puedes comprobar en la siguiente captura…

Si, por algún motivo, utilizas (tú o tus visitantes) una versión antigua de Chrome es posible que no funcione el truco anterior. Para cubrir también esta situación y también hacer desaparecer el – en este caso – botón de descarga, añade el siguiente código en Apariencia > Personalizar > CSS adicional:

/* OCULTAR BOTÓN DESCARGA AUDIO */
audio::-internal-media-controls-download-button {
    display:none;
}
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}
audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Ajústalo a tu gusto */
}

¿Se puede ocultar también en los vídeos?

Pues claro, la primera parte sería exactamente igual, solo que en el código del vídeo insertado desde el editor.

Lo que cambiaría sería el CSS, que en el caso del vídeo deberás añadir lo siguiente:

/* OCULTAR BOTÓN DESCARGA VÍDEO */
video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Ajústalo a tu gusto */
}

Como ves, soluciones prácticas para problemas molestos 🙂

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!