Los subtítulos deben adaptarse a cómo ves un vídeo
Hasta ahora, el estilo de los subtítulos se limitaba a los controles habituales: fuente, tamaño, grosor, color y opacidad del fondo. Sirven para el uso diario, pero no cubren todas las formas de aprovechar subtítulos bilingües.
Al practicar comprensión auditiva, quizá quieras ocultar la traducción hasta que la necesites. Si la vista se te va siempre al texto original, puedes atenuarlo. Y en un vídeo con mucha información visual, puede venir bien un fondo más marcado, más espacio o una pequeña animación.
Read Frog 1.46.5 añade CSS personalizado a los estilos de subtítulos de vídeo. Incluye una vista previa en tiempo real y tres ajustes preparados: puedes empezar con un clic y editar el código solo si quieres.
Empieza con un ajuste
Abre el menú y elige el comportamiento más cercano a lo que buscas:
| Ajuste | Qué hace | Para qué sirve |
|---|---|---|
| Blur translation | Difumina la traducción y la muestra al pasar el cursor | Escuchar antes de comprobar el significado |
| Dashed translation | Subraya la traducción con una línea discontinua | Distinguir rápidamente las dos líneas |
| Dim original | Reduce la opacidad del texto original | Dar prioridad visual a la traducción |
Los ajustes añaden CSS normal al editor; no te encierran en un modo. Puedes cambiar cualquier valor y combinar varios ajustes, por ejemplo difuminar la traducción mientras atenúas el original.
Prueba Blur translation para una escucha activa. Escucha primero la frase y pasa el cursor sobre la traducción solo cuando quieras comprobarla.
Edita viendo el resultado
La vista previa cambia mientras escribes. Muestra la misma estructura que los subtítulos reales, sin guardar cada cambio ni alternar entre ajustes y vídeo.
El editor ofrece resaltado de sintaxis y validación. Confirma cuándo el CSS es válido y detiene los errores de sintaxis o las hojas demasiado largas antes de guardar. El guardado es explícito, para que un experimento a medias no se convierta en tu estilo por accidente.
Los controles normales siguen funcionando. El CSS se aplica sobre las fuentes, tamaños, grosores, colores y opacidad elegidos, y puede sustituirlos sin usar !important.
Tres selectores cubren toda la capa
Solo necesitas tres clases:
| Selector | Elemento |
|---|---|
.read-frog-subtitles-box | Caja de fondo que rodea ambas líneas |
.subtitles-main | Subtítulo original |
.subtitles-translation | Subtítulo traducido |
El ajuste Blur translation es simplemente:
.subtitles-translation {
filter: blur(6px);
transition: filter 0.15s ease;
}
.subtitles-translation:hover {
filter: none;
}La hoja de estilo queda aislada dentro de la capa de subtítulos de Read Frog, por lo que no modifica la página de YouTube. La vista previa usa el mismo límite y las mismas clases que la capa real.
Cómo usarlo
- Abre Ajustes de Read Frog → Subtítulos de vídeo → Estilo de subtítulos.
- Entra en CSS personalizado al final de la página.
- Elige un ajuste o escribe tu CSS mirando la vista previa.
- Cuando la validación termine, selecciona Guardar.
El CSS personalizado para subtítulos está disponible en Read Frog 1.46.5. No hace falta activar nada más después de actualizar.
Escrito por
Read Frog Team
en
mar 25 ago 2026
Versión de extensión
1.46.5