YouTube
Skip to main content

YouTube

Cómo usar este componente

Selecciona el componente de YouTube cuando quieras que los usuarios reproduzcan el vídeo de YouTube directamente dentro de la página en lugar de ir directamente al sitio de YouTube.

Este componente integra los vídeos de YouTube dentro de una página web, permitiendo a los usuarios verlos directamente en el sitio.

Componente actualizado de YouTube

Anatomía en YouTube

  1. Reproductor de vídeo de YouTube
  2. Título del vídeo
  3. Descripción
  4. Botón (opcional)
Diagrama anatómico de vídeo de YouTube con señales numeradas para el reproductor de vídeo, texto del título, texto de descripción y un botón opcional de llamada a la acción.

Mejores prácticas

  • Considera usar el diseño de Destacados para enfatizar un vídeo principal mientras sigues mostrando vídeos relacionados.
  • Utiliza el diseño horizontal para mostrar más de tres vídeos, ajustando vídeos por fila para equilibrar detalle y elección.
  • Utiliza títulos cortos y descriptivos de vídeo (máximo 65 caracteres); acortar los títulos predeterminados de YouTube cuando sea necesario.
  • No enlazes vídeos que no estén alojados en el canal oficial de YouTube de TxDOT.
  • Evita reproducir vídeos automáticamente, ya que esto puede ser desorientador— especialmente para usuarios de tecnologías de asistencia.
  • Evita mostrar demasiados vídeos a la vez, ya que puede causar una sobrecarga de opciones.

Ejemplos

Mal ejemplo:

  • El componente de YouTube se coloca dentro de un diseño de columna, haciendo que los vídeos se sientan restringidos y desalineados.
  • El diseño multicolumna de YouTube se utiliza sin suficientes vídeos para llenar el amplio área de contenido, lo que resulta en un espaciado desequilibrado.
YouTube mostró un diseño en una configuración de columnas estrechas, dejando espacio en la cuadrícula sin usar y reduciendo el equilibrio visual.
El componente de YouTube utiliza un diseño de varias columnas en un área de contenido estrecha, reduciendo la legibilidad del vídeo y el equilibrio visual.

Buen ejemplo:

  • El componente de YouTube se coloca en un área amplia de contenido usando el diseño destacado para enfatizar un vídeo principal con vídeos relacionados de apoyo.
  • El componente de YouTube utiliza un diseño horizontal de varias columnas en un área de contenido amplia, con suficientes vídeos para llenar el diseño y mantener el equilibrio visual.
El componente de YouTube (diseño destacado) se muestra en un área amplia de contenido para resaltar un vídeo principal.
El componente de YouTube (diseño de columnas) utiliza una configuración de 3 columnas en un área amplia de contenido para presentar varios vídeos de forma clara.

Ubicación

Coloca el componente de YouTube en áreas amplias y principales de contenido; utiliza el diseño destacado cerca de la parte superior para mayor visibilidad y reserva los diseños multicolumna para los tramos amplios.

Características de YouTube

  • Descripción: Proporciona información adicional sobre tu vídeo.
  • Icono de lengua de signos: Si tu vídeo incluye lengua de signos, selecciona la casilla "Mostrar icono de lengua de signos en el vídeo" para mostrar un icono junto al título del vídeo.
  • Transcripción: opcional, pero puede ayudar a algunos usuarios si se proporciona.
  • Ancho de pantalla: Solo disponible en disposición de una columna al mostrar un vídeo por fila.
    • Ancho completo de página: Valor por defecto, expande el vídeo hasta el ancho total de su contenedor.
    • Recuadro: Reduce la visualización del vídeo individual y se centra en la página.

Requisitos de componentes

Todos los vídeos deben subirse al canal oficial de YouTube de TxDOTantes de ser incluidos en el sitio.

Subiendo vídeos

Los usuarios autorizados pueden solicitar que sus vídeos se suban al canal de YouTube de TxDOT enviando un ticket.

Opciones de visibilidad

  • Público: Cualquiera puede ver el vídeo.
  • Privado: Solo quienes tengan la URL pueden ver el vídeo.

Nota: Esta configuración debe elegirse durante la subida y no puede modificarse dentro del componente.

Accesibilidad

  • Asegúrate de que el título del vídeo sea único y descriptivo.
  • Asegúrate de que el vídeo tenga subtítulos de texto sincronizados y precisos de la información de audio de voz y no de voz necesaria para entender el contenido. Los pies de foto deberían ser:
    • Sincronizados para aparecer al mismo tiempo que el audio correspondiente.
    • Fiel al contenido de audio.
    • Detallado: los subtítulos no solo deben incluir diálogos, sino también identificar quién está hablando e incluir información no relacionada con el habla transmitida a través del sonido, como música, efectos sonoros significativos y ruidos de fondo ambientales relevantes como portazos, aplausos de personas, etc.
  • La descripción de audio debe incluirse en los vídeos pregrabados. Una audiodescripción es una narración oral sincronizada añadida al vídeo que describe el contenido visual importante del mismo.
    • Si toda la información de vídeo ya está proporcionada en audio existente, incluyendo cualquier información visual relevante, no es necesaria una audiodescripción adicional.
    • La audiodescripción debe estar en el mismo idioma que el vídeo o la página en la que aparece.
  • El expediente académico es opcional pero se fomenta.

Lista de verificación para coordinador web

  • Icono de lengua de signos: Para añadir un icono de lengua de signos, marque la casilla "¿Mostrar icono de lengua de signos en vídeo?". El icono aparecerá en la parte superior del vídeo.
  • Enlace de YouTube: Usa el enlace del reloj de la barra de direcciones del navegador al introducir el enlace de YouTube. Los enlaces que no son de YouTube causarán un error.
  • Opción a pantalla completa: Marque la casilla "Permitir pantalla completa" para que los usuarios puedan cambiar el vídeo a pantalla completa.
  • Transcripción: Si quieres proporcionar una transcripción por texto, introdúzala en el cuadro de transcripción. Esto ayuda a los usuarios a seguir el vídeo.
  • Estilo de maquetación:
    • Selecciona el ancho estándar (por defecto) para las dimensiones estándar (770px por 433px).
    • Selecciona el ancho completo para que el vídeo se expanda hasta el ancho total de su contenedor.
  • Alineación con el título y la descripción:
    • Elige la alineación izquierda (por defecto) para el texto justificado a la izquierda.
    • Elige la alineación del centro para el texto justificado por el centro.

Actualizado el 7 de mayo de 2026