YouTube en HTML

Las lecciones de audio y video te enseñaron a alojar tus archivos bajo carpetas como media/. YouTube es distinto: no descargas su stream a tu servidor ni apuntas un video local a la página de watch. Insertas su reproductor con un iframe usando el fragmento que YouTube te da. Tu página sigue relativamente ligera; la interfaz pesada y los datos del vídeo se cargan desde los servidores de YouTube cuando alguien visita con red.

Qué significa insertar (embed)

Un embed coloca una página interactiva de otro sitio (aquí, un reproductor) dentro de un marco rectangular en tu página. El visitante sigue viendo tus títulos y párrafos alrededor, pero los controles, la marca y el stream vienen de YouTube. Por eso el marcado parece un iframe con src hacia youtube.com/embed/..., no un video local con src="media/clip.mp4". Separa mentalmente: «yo alojo el archivo» de «encuadro el reproductor de otro».

Respuesta directa

En YouTube abre el vídeo → Share → Embed → pega el fragmento <iframe …> en el body de tu HTML. Pon width y height sensatos. El src es la URL de inserción de YouTube para ese vídeo. Prefiere el diálogo oficial para que permisos, forma de URL y atributos recomendados sigan correctos en lugar de adivinar desde un enlace de chat.

Patrón oficial de iframe

Sustituye VIDEO_ID por el id real de YouTube (Share → Embed ya lo rellena). El ejemplo muestra la forma habitual para principiantes tras copiar una o dos veces. Trátalo como patrón para entender, no como motivo para inventar un host de embed desde cero.

Lectura del ejemplo de embed

• iframe crea la región del reproductor de terceros
• src debe ser la forma embed (/embed/VIDEO_ID), no solo la página watch normal
• width y height reservan espacio para que el diseño no salte al cargar
• title nombra el marco para tecnologías de apoyo — no lo dejes vacío ni absurdo
• allowfullscreen permite ampliar cuando host y navegador lo permiten
• Fragmentos modernos pueden incluir allow y más atributos — conserva lo del diálogo oficial
• Pega primero desde Share → Embed; luego ajusta el tamaño si tu columna lo necesita

Por qué el principiante copia, no inventa

Escribir a mano una URL watch en src, inventar query strings o meter un enlace corto youtu.be en el atributo equivocado suele producir una caja vacía. El diálogo Embed entrega URL y atributos alineados con el reproductor actual. Tras un pegado correcto ves el patrón y puedes ajustar dimensiones con criterio sin reconstruir la URL de memoria.

Tamaño sin romper la página

Tamaños clásicos como 560 por 315 dan sensación 16:9 familiar. Un iframe minúsculo esconde controles; uno enorme desborda pantallas pequeñas. Empieza con los tamaños oficiales y reduce un poco si la columna es estrecha. Lecciones CSS posteriores cubren embeds fluidos; aquí el objetivo es un reproductor usable sin destrozar un diseño simple.

Coste de terceros y privacidad

Insertar YouTube añade peticiones de red a servidores de Google. Según navegador, región y opciones del reproductor pueden intervenir cookies o almacenamiento similar. Tu página también depende de que YouTube siga disponible y el vídeo sea insertable. Eso vale para muchos tutoriales públicos. Para clips de aula privados y offline-friendly, un video autoalojado suele ser más limpio. Elige a propósito: embed cuando el clip ya vive en YouTube; alojar cuando quieres control total del archivo.

YouTube frente a video frente a audio

• Clip ya en YouTube, su reproductor → embed iframe desde Share → Embed
• Tu propio MP4/WebM en tu servidor → video con controls
• Tu propio archivo de sonido → audio con controls
  No envuelvas un MP4 local en un iframe de YouTube. No pongas una URL watch en el src de video esperando un reproductor HTML nativo. Empareja la herramienta con dónde vive el medio.

Hábitos de accesibilidad para embeds

Da al iframe un title claro sobre el tema del vídeo. Mantén texto alrededor que explique por qué está el clip. Si el contenido hablado es esencial, enlaza una transcripción o pega un resumen cuando puedas — el marco solo no sustituye un buen párrafo.

Práctica en el editor

1. Abre cualquier vídeo público de YouTube que puedas insertar para practicar.
2. Usa Share → Embed y copia el fragmento iframe completo.
3. Pégalo en el body bajo un encabezado corto que nombre el clip.
4. Abre la página en local (con red) y confirma que carga el reproductor.
5. Cambia un poco width/height y vuelve a mirar el diseño.
6. Confirma un title útil y escribe una frase de contexto alrededor.

Errores fáciles

• Escribir mal la URL embed o pegar un enlace watch en src
• Olvidar un title útil en el iframe
• Hacer el iframe minúsculo o enorme sin revisar el diseño
• Confundir embeds de YouTube con video / audio autoalojados
• Esperar que el iframe funcione sin red hacia YouTube
• Borrar el texto de la lección y confiar solo en el reproductor
• Asumir que todo vídeo permite embed
• Copiar solo la URL watch en un párrafo y llamarlo «embed»

Resumen

• Los embeds de YouTube usan un iframe hacia una URL embed
• Prefiere Share → Embed para que el fragmento sea correcto
• Dimensiona el reproductor con cuidado y mantén un title claro
• Recuerda que es contenido de terceros, no un archivo local en tu disco
• Usa video o audio cuando alojas el archivo; iframe cuando YouTube aloja el reproductor