Desarrolladores

Cómo insertar un vídeo de YouTube en tu web (responsive)

Inserta un vídeo de YouTube que se adapte a cualquier pantalla: menú Compartir, código responsive, minuto de inicio, modo de privacidad, WordPress y velocidad.

Por Equipo de Free Thumbnail Downloader 2 min de lectura
Portada del artículo: Cómo insertar un vídeo de YouTube en tu web (responsive)
En este artículo
  1. La forma rápida: el menú Compartir de YouTube
  2. La forma mejor: código responsive
  3. Opciones útiles
  4. Modo de privacidad mejorada
  5. WordPress
  6. Mantén la página rápida
  7. Encontrar el ID del vídeo

Insertar un vídeo permite verlo sin salir de tu página. El código que da YouTube funciona, pero tiene un tamaño fijo que puede romper el diseño en móviles. Así se hace bien.

La forma rápida: el menú Compartir de YouTube

  1. Bajo el vídeo, haz clic en Compartir → Insertar.
  2. Si quieres, marca Empezar en para un minuto de inicio.
  3. Copia el código <iframe> y pégalo en el HTML de tu página.

El código por defecto usa width="560" height="315", que puede desbordarse en pantallas pequeñas.

La forma mejor: código responsive

Esta versión siempre ocupa el ancho de su contenedor y mantiene la forma 16:9:

<iframe
  style="width:100%;aspect-ratio:16/9;border:0"
  src="https://www.youtube-nocookie.com/embed/ID_VIDEO"
  title="Reproductor de vídeo de YouTube"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Nuestro generador de código embed lo crea para cualquier vídeo y añade opciones con casillas.

Opciones útiles

ParámetroEfecto
start=90Empieza en 1:30
end=150Se detiene en 2:30
autoplay=1&mute=1Se reproduce solo (debe estar silenciado)
loop=1&playlist=ID_VIDEORepite el vídeo
controls=0Oculta los controles
cc_load_policy=1Muestra subtítulos por defecto

Añádelos después del ID del vídeo, empezando con ? y separándolos con &; por ejemplo, .../embed/ID_VIDEO?start=90&mute=1.

Modo de privacidad mejorada

Usar youtube-nocookie.com en lugar de youtube.com hace que YouTube no guarde información de tus visitantes hasta que reproducen el vídeo. Es una buena opción por defecto para blogs y webs con público atento a la privacidad.

WordPress

En el editor de bloques, añade un bloque HTML personalizado y pega el código. Para una inserción simple sin opciones, también puedes pegar el enlace del vídeo solo en una línea y WordPress crea el reproductor.

Mantén la página rápida

Cada reproductor insertado carga scripts adicionales. Con varios vídeos en una página:

  • Mantén loading="lazy" para que los reproductores carguen solo al acercarse el visitante.
  • Plantéate mostrar una miniatura con enlace en lugar del reproductor completo. Las URL de miniaturas se explican en nuestra guía de URL de miniaturas, y puedes obtener las imágenes con el descargador de miniaturas.

Encontrar el ID del vídeo

El ID son los 11 caracteres después de v= o youtu.be/. Si tienes muchos enlaces, el extractor de ID los saca todos de una vez.

Preguntas frecuentes

¿Por qué mi vídeo insertado no se reproduce solo con sonido?

Los navegadores bloquean la reproducción automática con sonido. Solo funciona si el vídeo está silenciado, así que añade mute=1 junto con autoplay=1.

¿Puedo insertar cualquier vídeo de YouTube?

La mayoría de vídeos públicos se pueden insertar, pero quien lo sube puede desactivarlo. En ese caso el reproductor muestra un aviso y un enlace para verlo en YouTube.

Descarga cualquier miniatura de YouTube en segundos

Pega un enlace y descarga todos los tamaños disponibles, hasta 1280×720.

Abrir el descargador
Equipo de Free Thumbnail Downloader

Creamos herramientas rápidas y sencillas para creadores de YouTube y escribimos guías basadas en nuestras propias pruebas.

Sigue leyendo