Hola chicos, ¿qué tal?
En este tutorial os voy a mostrar como podemos forzar para que aparezcan los subtítulos en un vídeo cuando lo añadimos a nuestra web.
Y no solo eso, sino que además veremos como podemos hacer para que aparezcan de forma predeterminada en el idioma que queramos.
RESUMEN
Si no quieres ver toda la explicación te resumo los parámetros que puedes usar para poder forzar los subtítulos automáticamente cuando añades un vídeo de YouTube en tu web:
- cc_load_policy=1 Para forzar activar los subtítulos
- cc_lang_pref=en Para indicar el idioma que aparecerán los subtítulos, en el ejemplo en inglés
- hl=en Idioma en el que aparecerá el interfaz del reproductor, en el ejemplo en inglés
Tutorial en Vídeo
Suscríbete a mi canal:
Y si me puedes dedicar más tiempo aquí viene una explicación paso a paso y con ejemplos reales 🥳
Para forzar los subtítulos en un vídeo de YouTube embebido en una web, necesitas agregar un parámetro en el código HTML. El parámetro se llama ‘cc_load_policy’ y puede tener dos valores: ‘1’ para mostrar los subtítulos o ‘0’ para ocultarlos.
Por ejemplo, si quieres que los subtítulos se muestren por defecto en tu vídeo, simplemente agrega ‘&cc_load_policy=1’ al final del código HTML del vídeo. El código completo se vería así:
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Y el resultado será este:
Traducir Subtítulos automáticamente en un vídeo de YouTube embebido en una web
No sólo se pueden añadir los subtítulos, sino que se puede elegir en que idioma.
Cuidado
Solo aparecerán si tienes añadido el subtítulo en ese idioma en el vídeo. Para ello tienes que configurarlo en el propio vídeo dentro de YouTube
El parámetro cc_lang_pref se usa para especificar el idioma de los subtítulos que se mostrarán al cargar el vídeo de YouTube. Esto le permite a los usuarios seleccionar el idioma de subtítulos preferido cuando se reproduce el vídeo. Esto es especialmente útil si el vídeo está disponible con subtítulos en varios idiomas, ya que el usuario puede seleccionar el que prefiera sin tener que cambiar manualmente los subtítulos.
El código que mostraría los subtítulos en inglés quedaría así:
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1&cc_lang_pref=en" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Y el resultado sería:
Mostrar el Reproductor de Youtube en el Idioma que Quieras en tu Web
Otro aspecto importante es mostrar los botones del propio reproductor en el idioma que queramos.
Si te fijas en los vídeos de arriba verás que están en español. A continuación te muestro como cambiarlo.
El parámetro hl de YouTube se usa para especificar el idioma en el que se muestra el contenido del reproductor de YouTube. Esto incluye la interfaz de usuario, los subtítulos, las descripciones de los vídeos, las etiquetas y los títulos. Si no se especifica un idioma específico, el contenido del reproductor se mostrará en el idioma predeterminado.
El código sería algo así hl=en, cambiando ‘en’ por el idioma que queramos:
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1&cc_lang_pref=en&hl=en" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>Y el resultado sería:
PROS
- Mejora la accesibilidad del contenido para todos los usuarios
- Los usuarios pueden alternar entre mostrar y ocultar los subtítulos
- Es relativamente sencillo implementar
CONTRAS
- Requiere configuración adicional pero como puedes ver es muy fácil
Espero que el tutorial te haya sido útil 😉