YouTube Shorts puede incrustarse en tus artículos usando un iframe HTML. Aunque YouTube actualmente no ofrece una opción de incrustación directa para Shorts, puedes mostrarlos modificando la URL del vídeo, reemplazándolo /shorts/ por /embed/, e insertándolo en un iframe. Esto te da control total sobre las dimensiones, el borde y el estilo del vídeo incrustado.
Cuándo usar esta técnica
- Incrustar contenido de vídeo de formato corto: muestra guías de productos, consejos rápidos o anuncios creados como YouTube Shorts directamente dentro de tus artículos.
- Complementando los pasos escritos con vídeo: inserta un vídeo de Shorts junto a un procedimiento para ofrecer a los lectores una guía visual sin salir de la página.
YouTube actualmente no ofrece una opción nativa de incrustación para Shorts. Esta solución funciona reemplazando shorts por embed la URL del vídeo. Si YouTube añade incrustaciones oficiales de Shorts en el futuro, ese método debería usarse en su lugar.
Cómo incrustar un corto de YouTube
-
Ve a YouTube y abre el vídeo de Shorts que quieres incrustar.
-
Copia la URL del vídeo usando uno de los siguientes métodos:
- Copia la URL desde la barra de direcciones de tu navegador.
- Haz clic en Compartir > copia.
-
Pega la URL copiada en el
srccampo del código iframe de arriba. -
En la URL, sustituye
/shorts/por/embed/.Por ejemplo:
Before: https://www.youtube.com/shorts/pVRefGmQDJM After: https://www.youtube.com/embed/pVRefGmQDJM
- Pega el código iframe completado en tu artículo usando la vista de código o el bloque HTML.
Referencia rápida
Sustituye <Shorts_video_code> por el ID de tu vídeo (el código alfanumérico al final de la URL de Shorts).
<iframe width="315" height="560"
src="https://www.youtube.com/embed/<Shorts_video_code>"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
| Campo | Default | Notas |
|---|---|---|
width |
315 |
Ajusta según sea necesario, mantén la relación de aspecto |
height |
560 |
Altura óptima para formato retrato de Shorts |
src |
Tu URL de vídeo | Sustituye /shorts/ por /embed/ en la URL |
frameborder |
0 |
Colocado en píxeles, 0 elimina el borde |
Ejemplo
Código:
<iframe width="315" height="560"
src="https://www.youtube.com/embed/pVRefGmQDJM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
Salida:
Alcance y cobertura
| Punto | Detalle |
|---|---|
| Tamaño recomendado | 315px × 560px (retrato, coincide con la relación de aspecto de Shorts 9:16) |
| Tamaños personalizados | Con soporte, ajusta ancho y alto, pero mantiene la relación 9:16 |
| Soporte para editores | Cualquier editor que soporte etiquetas iframe HTML |
| Opción nativa de incrustación | Actualmente no disponible para YouTube Shorts |
Mejores prácticas
- Mantén siempre la relación de aspecto 9:16: los cortos se graban en formato retrato. Si redimensionas el fotograma, mantén la relación ancho-altura en 9:16 (por ejemplo, 270×480 o 360×640) para evitar que el vídeo parezca estirado o recortado.
- Usarlo
frameborder="0": poner el borde a cero da un aspecto más limpio. Si quieres un borde visible, usa CSS en un envoltorio<div>en lugar delframeborderatributo, que está obsoleto en HTML5. - Establecido
allowfullscreen: este atributo permite a los lectores expandir el vídeo a pantalla completa, lo que mejora la experiencia de visualización de contenido con texto o detalle pequeño en pantalla. - Prueba la incrustación antes de publicar: después de insertar el iframe, previsualiza el artículo para confirmar que el vídeo carga correctamente. Si el vídeo muestra un error, comprueba que
/shorts/se haya reemplazado completamente en/embed/la URL. - Mantén los títulos de los vídeos descriptivos: el
titleatributo en el iframe es leído por los lectores de pantalla. Sustituye"YouTube video player"por un título descriptivo, como"Product setup walkthrough"para mejorar la accesibilidad.