Guía con Videos de YouTube

Guía: Videos de YouTube Embebidos

Aprende a incluir videos de YouTube en tu documentación de forma profesional.

¿Cuándo usar YouTube?

YouTube es ideal cuando:

El video ya está publicado en YouTube
Quieres ahorrar bandwidth de tu servidor
Deseas aprovechar las analíticas de YouTube
El contenido es público y educativo
Quieres subtítulos auto-generados

Método 1: Embed básico de YouTube

Código:

<iframe
  width="100%"
  height="450"
  style="max-width: 800px;"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Cómo obtener el VIDEO_ID

De una URL normal de YouTube:

https://www.youtube.com/watch?v=dQw4w9WgXcQ
                                ↑ Esto es el VIDEO_ID

De una URL compartida (corta):

https://youtu.be/dQw4w9WgXcQ
                 ↑ VIDEO_ID

Método 2: Video con timestamp (empezar en un momento específico)

Útil para dirigir a los usuarios a una sección específica del video:

<!-- Empieza en el segundo 120 (2 minutos) -->
<iframe
  width="100%"
  height="450"
  style="max-width: 800px;"
  src="https://www.youtube.com/embed/VIDEO_ID?start=120"
  frameborder="0"
  allowfullscreen>
</iframe>

Cómo calcular segundos:

1:30 → 90 segundos
2:45 → 165 segundos
10:20 → 620 segundos

Fórmula: (minutos × 60) + segundos

Método 3: Opciones avanzadas con parámetros

YouTube permite personalizar el reproductor con parámetros URL:

<iframe
  width="100%"
  height="450"
  style="max-width: 800px;"
  src="https://www.youtube.com/embed/VIDEO_ID?rel=0&modestbranding=1&autoplay=0"
  frameborder="0"
  allowfullscreen>
</iframe>

Parámetros útiles:

Parámetro	Valor	Descripción
`rel`	`0` o `1`	`0` = No mostrar videos relacionados al final
`modestbranding`	`1`	Ocultar logo de YouTube en controles
`autoplay`	`0` o `1`	`1` = Reproducir automáticamente
`mute`	`0` o `1`	`1` = Silenciar el video
`start`	segundos	Tiempo de inicio (ej: `90` para 1:30)
`end`	segundos	Tiempo de fin (ej: `180` para 3:00)
`controls`	`0` o `1`	`0` = Ocultar controles de reproducción
`loop`	`0` o `1`	`1` = Reproducir en bucle
`cc_load_policy`	`1`	Mostrar subtítulos por defecto
`hl`	`es` o `en`	Idioma de la interfaz

Ejemplo combinando parámetros:

<!-- Video que empieza en 1:30, termina en 3:00, sin videos relacionados -->
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID?start=90&end=180&rel=0"
  ...
</iframe>

Método 4: Obtener código embed desde YouTube

Ve al video en YouTube
Haz clic en “Compartir” debajo del video
Selecciona “Insertar” (Embed)
Copia el código <iframe>
Personaliza el ancho: cambia width="560" a width="100%"
Ajusta el alto: cambia height="315" a height="450"
Agrega style="max-width: 800px;" para limitar el ancho

Estilos personalizados

Centrar el video

<div style="display: flex; justify-content: center; margin: 2rem 0;">
  <iframe
    width="100%"
    height="450"
    style="max-width: 800px; border-radius: 8px;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Video con sombra y borde

<iframe
  width="100%"
  height="450"
  style="max-width: 800px; border-radius: 12px; box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); border: 2px solid #00ff88;"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

Video responsive (mantiene proporción 16:9)

<div style="position: relative; padding-bottom: 56.25%; height: 0; max-width: 800px;">
  <iframe
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/VIDEO_ID"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Método 5: Playlist de YouTube

También puedes embeber playlists completas:

<iframe
  width="100%"
  height="450"
  style="max-width: 800px;"
  src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

Cómo obtener PLAYLIST_ID:

De una URL de playlist:

https://www.youtube.com/playlist?list=PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf
                                       ↑ Esto es el PLAYLIST_ID

Ejemplo: Serie de tutoriales

Introducción al sistema

Este video de 5 minutos cubre los conceptos básicos:

Temas cubiertos:

Arquitectura general (0:00-1:30)
Componentes principales (1:30-3:00)
Flujo de datos (3:00-5:00)

Configuración avanzada

Este tutorial muestra configuraciones avanzadas. El video empieza directamente en la sección relevante (min 2:15):

Playlist completa del curso

Si prefieres ver todos los videos en orden, aquí está la playlist completa:

<iframe
  width="100%"
  height="450"
  style="max-width: 800px;"
  src="https://www.youtube.com/embed/videoseries?list=PLAYLIST_ID"
  frameborder="0"
  allowfullscreen>
</iframe>

Agregar contexto a los videos

Ejemplo con contexto completo:

Cómo crear tu primer proyecto

Duración: 8 minutos Prerequisitos: Node.js instalado

Este tutorial te guiará paso a paso en la creación de tu primer proyecto desde cero.

Lo que aprenderás:

Inicializar un nuevo proyecto (0:00-2:00)
Configurar dependencias (2:00-4:30)
Crear la estructura de archivos (4:30-6:00)
Ejecutar tu primer build (6:00-8:00)

Próximos pasos:

Privacidad y rendimiento

Videos no listados vs públicos

Público: Cualquiera puede encontrarlo en YouTube
No listado: Solo con el enlace (ideal para docs internas)
Privado: No se puede embeber (solo el dueño puede ver)

Lazy loading

Para mejorar el rendimiento de la página:

<iframe
  width="100%"
  height="450"
  style="max-width: 800px;"
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  frameborder="0"
  allowfullscreen>
</iframe>

El atributo loading="lazy" hace que el video solo se cargue cuando el usuario se desplaza hacia él.

Solución de problemas comunes

El video no se muestra

Verifica el VIDEO_ID: Cópialo directamente desde la URL de YouTube
Revisa la privacidad: Videos privados no se pueden embeber
Comprueba restricciones: Algunos videos bloquean el embed
Confirma la URL: Debe ser /embed/VIDEO_ID, no /watch?v=VIDEO_ID

El video muestra “Video no disponible”

El video fue eliminado
El video es privado
El video tiene restricciones de región
El propietario deshabilitó el embed

El autoplay no funciona

Los navegadores modernos bloquean autoplay con sonido:

<!-- Funciona: autoplay con mute -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1&mute=1" ...></iframe>

<!-- No funciona: autoplay sin mute -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" ...></iframe>

Alternativas a YouTube

Si YouTube no es una opción, considera:

Vimeo: Más profesional, sin anuncios (de pago)
Wistia: Enfocado en empresas, analíticas avanzadas
Videos locales: Total control, ver Guía de Videos Locales

Comparativa: YouTube vs Videos Locales

Aspecto	YouTube	Videos Locales
Hosting	Gratis	Consume tu servidor
Bandwidth	Ilimitado (YouTube)	Limitado por tu plan
Privacidad	Menos control	Control total
Disponibilidad	Depende de YouTube	Depende de tu server
SEO	Indexable en Google/YouTube	Solo en tu sitio
Analytics	Incluidas (YouTube Studio)	Necesitas implementar
Subtítulos	Auto-generados	Manual
Velocidad de carga	Rápida (CDN global)	Depende de tu server

Checklist antes de embeber

El video es relevante para la documentación
El VIDEO_ID es correcto
El video es público o no listado (no privado)
Has agregado contexto antes/después del video
El ancho es responsive (width="100%")
Has limitado el ancho máximo (max-width: 800px)
Has considerado usar start= para ir a sección específica
Funciona en escritorio y móvil