¿Cómo agrego video a WordPress sin ralentizar mi sitio web ?

Cada vez que creo una página de destino de alta conversión, mi primer pensamiento es casi siempre incluir un vídeo. Es la forma más rápida de generar confianza, pero solo si se reproduce sin problemas para el usuario.

La mayoría de los tutoriales te muestran cómo pegar una URL y darlo por hecho. Lo que omiten es por qué tu vídeo podría estar arruinando la velocidad de tu página y qué hacer en su lugar.

Cuando conozcas los pasos, incrustar vídeo en WordPress te llevará menos de dos minutos. En esta guía, te explicaré cada método que utilizo, incluido cómo mantener tus páginas rápidas después de hacerlo.

¿Por qué añadir vídeos a tu sitio de WordPress?

El 82% de los profesionales del marketing de vídeo informan de un aumento del tráfico web después de añadir vídeo a su contenido. Esa es una gran razón para empezar a usar vídeo en tu sitio de WordPress.

Añadir vídeos de alta calidad puede ayudar a tu SEO de WordPress y facilitar que la gente te encuentre.

¿Debo subir vídeos directamente a WordPress?

Es mejor incrustar vídeos de plataformas como YouTube o Vimeo que subirlos directamente a WordPress.

Aunque puedes subir vídeos a tu Biblioteca de Medios, no lo recomiendo. En SeedProd, siempre incrustamos vídeos en su lugar, y aquí te explicamos por qué:

• Tamaños de archivo grandes: Los vídeos ocupan mucho espacio de almacenamiento y pueden ralentizar tu sitio, perjudicando la experiencia del usuario y el SEO.
• Alto uso de ancho de banda: la transmisión de vídeo consume importantes recursos del servidor. Si tu plan de alojamiento tiene límites, podrías alcanzarlos rápidamente y enfrentarte a costes adicionales.
• Oportunidades de tráfico adicional: subir a plataformas como YouTube o Vimeo te permite llegar a sus audiencias y enviar más visitantes a tu sitio.

Incrustar o utilizar un plugin de vídeo para WordPress es la forma más eficiente de mantener tu sitio rápido y accesible mientras amplías tu alcance.

Dónde alojar tu vídeo antes de incrustarlo

Antes de poder incrustar un vídeo, necesita estar alojado en algún lugar. Estas son las tres opciones más comunes.

Plataforma	Coste	Mejor para	Compensación
YouTube	Gratis	Descubrimiento, contenido público	Muestra vídeos relacionados al final; no se puede eliminar la marca en el plan gratuito
Vimeo	Nivel gratuito; planes de pago a partir de 20 €/mes	Páginas de ventas, vídeo profesional	Sin vídeos de la competencia; se necesita plan de pago para funciones empresariales
Alojado internamente con CDN	Varía (costes de alojamiento + CDN)	Contenido de vídeo restringido o premium	Control total; mayor coste y más configuración requerida

Para la mayoría de los sitios, YouTube es la opción correcta: gratuito, rápido y excelente para el descubrimiento. Si usas vídeo para páginas de ventas o quieres que no haya anuncios de la competencia al final, el plan de pago de Vimeo vale la pena.

Cómo incrustar vídeo en WordPress: 4 maneras

Hay varias formas de incrustar un vídeo en WordPress. A continuación, compartiré los métodos que más utilizo, desde el enfoque más sencillo de copiar y pegar hasta el método iFrame para plataformas no estándar.

Método 1: Incrustar un vídeo en publicaciones y páginas de WordPress (Método del editor de bloques)

El Editor de Bloques de WordPress, o Gutenberg, proporciona una forma sencilla de incrustar vídeos en tus publicaciones y páginas de WordPress.

Primero, necesitarás la URL del vídeo que deseas incrustar. Si utilizas una plataforma como YouTube, navega hasta el vídeo y copia la URL de la barra de direcciones. También puedes hacer clic en el icono de compartir y copiar la URL del vídeo desde allí.

A continuación, navega hasta la entrada o página donde deseas añadir el vídeo y haz clic en "Editar" para abrir el Editor de Bloques de WordPress.

Haz clic en cualquier lugar dentro del editor de bloques de WordPress y pega la URL que copiaste anteriormente. Una vez que pegues la URL del vídeo, WordPress recuperará automáticamente el código de incrustación y mostrará el vídeo dentro del editor de contenido.

A continuación, puedes personalizar el vídeo haciendo clic en las opciones de la barra de herramientas emergente. Por ejemplo, puedes cambiar el ancho del vídeo, la alineación, los subtítulos, la relación de aspecto y más.

WordPress solo puede incrustar automáticamente plataformas en lista blanca, incluyendo:

• Amazon
• Dailymotion
• Facebook
• Imgur
• Instagram
• Reddit
• SoundCloud
• Spotify
• Twitter
• Vimeo
• YouTube
• Y m ilde;s.

Si deseas incrustar vídeos de sitios web que no están en la lista blanca, deberás copiar y pegar el código HTML completo del vídeo. Simplemente agrega un nuevo bloque llamado HTML personalizado y pega el código del vídeo para hacerlo.

La tarea final es guardar y publicar tu entrada o página para que el vídeo esté en directo.

Si todavía estás utilizando el editor clásico, puedes copiar la URL del vídeo y pegarla directamente en el editor de WordPress. Como antes, el vídeo se cargará automáticamente.

Método 2: Añadir vídeo en cualquier lugar de tu sitio WordPress con SeedProd

Si buscas un enfoque más personalizado para incrustar vídeo en WordPress, SeedProd ofrece una solución sencilla pero potente.

SeedProd es un creador de sitios web de arrastrar y soltar que te permite agregar vídeo a cualquier parte de tu sitio: páginas de destino, plantillas de temas, barras laterales, sin tocar código.

Primero, deberás instalar y activar el plugin SeedProd.

Para obtener ayuda con esto, puedes consultar nuestra documentación sobre cómo instalar SeedProd. Te explicará cómo descargar, instalar y activar el plugin y tu clave de licencia.

Ahora, puedes agregar vídeos a tu sitio web usando el creador de arrastrar y soltar de SeedProd.

Añadir Vídeos a una Página de Destino de WordPress

Con SeedProd, agregar un vídeo a tu página de destino es muy fácil. Navega a SeedProd » Creador de Páginas de Destino desde tu panel de WordPress y crea una nueva página de destino o edita una página de WordPress existente.

Una vez que estés dentro del constructor de páginas, tienes 2 opciones para incrustar contenido de vídeo. Puedes usar el bloque Vídeo estándar o el bloque avanzado Vídeo Emergente.

Añadir el bloque de vídeo

Para usar el bloque de vídeo, encuéntralo en la barra lateral izquierda y arrástralo a la disposición de tu página de destino.

Puedes elegir entre 2 fuentes de vídeo en la configuración del bloque: YouTube y Personalizada.

La fuente de YouTube te permite pegar un enlace de vídeo de YouTube y automáticamente incrustará el código del vídeo por ti. Luego, puedes personalizar el ancho, la alineación y la visibilidad del vídeo en dispositivos de escritorio o móviles con unos pocos clics.

Si seleccionas la opción Personalizada, puedes incrustar un vídeo en WordPress sin YouTube. Para ello, deberás copiar y pegar el código de incrustación del vídeo en el cuadro Código de vídeo personalizado.

Añadir el bloque de ventana emergente de vídeo

El bloque de ventana emergente de vídeo de SeedProd ofrece muchas más opciones de personalización que el bloque estándar. Puedes encontrarlo en la barra lateral de Bloques avanzados, luego arrástralo a tu página.

En la configuración del bloque, hay varias opciones de fuente de vídeo.

Puedes incrustar automáticamente contenido de vídeo de YouTube o Vimeo pegando el enlace del vídeo.

Alternativamente, la opción Personalizada te permite subir un vídeo desde tu ordenador o pegar un enlace de vídeo de un sitio web externo.

Después de elegir la fuente de vídeo, puedes personalizar el reproductor de vídeo habilitando diferentes funciones, entre ellas:

• Marca Modesta: Oculta la marca de YouTube de tu reproductor de vídeo.
• Modo de Privacidad: Evita que YouTube o Vimeo almacenen información del visitante a menos que reproduzcan el vídeo.
• Carga Diferida: Mejora el tiempo de carga de tu página cargando los vídeos después de que la página se cargue.

Además, habilitar la función de Vídeo fijo asegura que cuando los usuarios visiten esa página, el vídeo permanecerá en la parte inferior de la pantalla mientras se desplazan.

Mantén la atención de un visitante en tu mensaje clave incluso mientras se desplaza.

Por último, el bloque de ventana emergente de vídeo tiene una opción de Superposición de vídeo, que te permite subir una imagen de miniatura de vídeo personalizada y un icono de reproducción.

Incluso puedes habilitar la opción de Lightbox para que el vídeo se abra en una ventana emergente de Lightbox cuando un usuario haga clic en él.

En una página de destino, uso el Vídeo Emergente con una miniatura personalizada y la opción de Caja de Luz. El visitante ve una imagen limpia hasta que elige verla. El vídeo se abre a pantalla completa cuando está listo, sin reproducción automática y sin ralentización de la página. Esa es la configuración que uso en mis propias páginas de destino de SeedProd.

Para una guía completa de personalización, consulta nuestro tutorial sobre cómo crear una página de destino de vídeo en WordPress.

Cuando estés satisfecho con las personalizaciones de tu vídeo y página de destino, haz clic en el botón Guardar y Publicar para que los cambios se apliquen.

Aquí tienes un ejemplo del vídeo final después de añadirlo a WordPress con SeedProd:

Incrustar un vídeo en tu tema de WordPress

Puede aprender cómo siguiendo esta guía sobre cómo crear un tema de WordPress.

Agregar vídeo a diferentes partes de tu tema de WordPress sigue pasos similares a la opción de página de destino. Todo lo que necesitas hacer es visitar SeedProd » Creador de Temas y editar cualquiera de las plantillas del tema.

Por ejemplo, puede abrir la plantilla de barra lateral y arrastrar uno de los bloques de vídeo para incrustar un vídeo en su barra lateral de WordPress.

Así es como se vería después de guardar los cambios:

O puede editar la plantilla del pie de página para añadir nuevo contenido de vídeo a sus widgets del pie de página.

Es realmente así de simple, y nada de esto implica codificar desde cero o contratar a un desarrollador.

Método 3: Usar plugins de vídeo de WordPress para incrustar y personalizar vídeos

Si busca funciones más avanzadas o tiene necesidades específicas que el Editor de Bloques de WordPress o SeedProd no pueden satisfacer, un plugin de WordPress especializado en incrustaciones de vídeo podría ser la mejor solución.

Para esto, recomendamos el plugin YouTube Feed Pro de Smash Balloon, el mejor plugin de galería de vídeos de YouTube para WordPress. Te permite incrustar vídeos del canal de YouTube en una galería personalizable.

El plugin puede importar automáticamente nuevos vídeos, combinar feeds de vídeo, añadir funcionalidad de transmisión en vivo, incrustar una lista de reproducción de YouTube y más. Las incrustaciones de YouTube también incluyen botones de "me gusta" y "compartir", comentarios y reacciones para aumentar la prueba social directamente dentro del widget de vídeo.

Para obtener más información, puedes ver esta guía sobre cómo incrustar vídeos de YouTube en WordPress.

Método 4: Incrustar usando código iFrame (para sitios no autorizados)

Los tres métodos anteriores manejan el 90% de los casos. Si necesitas incrustar desde un sitio que WordPress no detecta automáticamente, o si deseas controlar las sugerencias de vídeos relacionados de YouTube, necesitarás el código iFrame en su lugar.

Así es como se hace:

1. Ve al vídeo en YouTube, haz clic en Compartir y luego en Incrustar, y copia el código iFrame.
2. En el editor de bloques de WordPress, añade un bloque de HTML personalizado.
3. Pega el código iFrame en el bloque.
4. Guarda y publica tu página.

Utiliza este método cuando la plataforma no esté en la lista blanca de oEmbed de WordPress, o cuando necesites parámetros personalizados. Por ejemplo, añadir rel=0 a la URL de YouTube reduce las sugerencias de vídeos relacionados al final.

Una cosa a tener en cuenta es que los iFrames manuales no son automáticamente adaptables en dispositivos móviles. Para solucionarlo, envuelve el iFrame en un contenedor CSS. Pega esto en el CSS personalizado de tu tema o en un bloque HTML encima del embed:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Luego, envuelve tu iFrame de esta manera: <div class="video-container">[código iFrame aquí]</div>. El valor de padding-bottom del 56,25% te da una relación de aspecto de 16:9 en cualquier tamaño de pantalla.

Para añadir un vídeo MP4 que alojas tú mismo, utiliza el bloque Vídeo del editor de bloques (no el bloque de YouTube), haz clic en 'Subir', selecciona tu MP4 y WordPress insertará un reproductor de vídeo HTML5 nativo. Configura la reproducción automática en 'desactivada' y añade una imagen de póster para un mejor rendimiento.

Cómo evitar que el vídeo ralentice tus páginas

Incrustar un vídeo de YouTube es rápido porque el vídeo en sí reside en sus servidores. Pero el reproductor todavía carga scripts en tu página, y eso afecta al rendimiento. Esto es lo que hago en cada página de vídeo para mantener las cosas rápidas.

• Carga diferida: El reproductor de vídeo solo se carga cuando un usuario se desplaza hasta él. En SeedProd, puedes habilitar esto directamente en la configuración del bloque de ventana emergente de vídeo. En el editor de bloques, WordPress ha cargado los vídeos de forma diferida por defecto desde la versión 5.5.
• Miniatura personalizada (superposición de imagen): En lugar de cargar el reproductor completo al cargar la página, muestras una imagen ligera. El reproductor solo se inicializa cuando el visitante hace clic en reproducir. La opción de superposición de vídeo de SeedProd hace exactamente esto. Para un embed típico de YouTube, esto reduce significativamente el peso inicial de la página.
• Evita las cargas directas: Como se mencionó anteriormente, los vídeos subidos a WordPress se sirven desde tu propio servidor. Si alojas el vídeo tú mismo, utiliza una CDN para entregarlo desde servidores más cercanos a tus visitantes.
• Vídeo adaptable: Los vídeos incrustados automáticamente desde el editor de bloques son adaptables por defecto. Los iFrames manuales necesitan el envoltorio CSS descrito en el Método 4 anterior.

La mayor mejora proviene de la miniatura personalizada. He visto páginas reducir su tiempo de renderizado casi a la mitad simplemente cambiando un embed de YouTube por una imagen de superposición. Es un cambio de cinco minutos con una diferencia real de velocidad.

Hacer que tus vídeos sean accesibles

Dos cosas más que vale la pena hacer antes de dar esto por terminado.

• Subtítulos: Habilita los subtítulos en YouTube, o sube un archivo SRT directamente a la plataforma. Para Vimeo, la misma opción está disponible en la configuración del vídeo. Los subtítulos ayudan a los usuarios con problemas de audición y mejoran el tiempo de visualización para los espectadores en entornos ruidosos.
• Transcripciones: Pega una transcripción de texto debajo del vídeo. Es una señal SEO significativa y hace que el contenido sea accesible para los usuarios que no pueden oír el audio en absoluto.
• Sin reproducción automática inesperada: La configuración de carga diferida de SeedProd significa que el vídeo no se reproduce hasta que el visitante lo elige. Esto es una victoria en accesibilidad. El audio inesperado desorienta a los usuarios de lectores de pantalla.

Preguntas frecuentes sobre cómo incrustar vídeo en WordPress

¿Cómo incrusto un vídeo en WordPress sin YouTube?

Utiliza la opción de origen de vídeo personalizado de SeedProd o el bloque de HTML personalizado del Editor de bloques. En SeedProd, selecciona el bloque de Vídeo o el bloque de Ventana emergente de vídeo, elige Personalizado como origen y pega el código de incrustación de tu vídeo. En el Editor de bloques, añade un bloque de HTML personalizado y pega el iFrame o el código de incrustación de tu plataforma de vídeo. Esto funciona para Vimeo, vídeos autoalojados y cualquier plataforma que proporcione un código de incrustación.

¿Cómo añado un vídeo MP4 a WordPress?

Utiliza el bloque de Vídeo del Editor de bloques (no el bloque de YouTube) para subir un MP4 directamente. Haz clic en el bloque, elige Subir y selecciona tu archivo MP4. WordPress inserta un reproductor de vídeo nativo HTML5. Para un rendimiento óptimo, desactiva la reproducción automática y añade una imagen de póster para que los visitantes vean una miniatura estática antes de que se cargue el vídeo.

¿Por qué no puedo incrustar un vídeo de YouTube en WordPress?

WordPress debe estar configurado para permitir incrustaciones. Ve a Ajustes » Medios y confirma que 'Intentar incrustar automáticamente todas las URL de texto sin formato' está marcado. Si la incrustación sigue fallando, es posible que el propietario del vídeo haya deshabilitado la incrustación por su parte.

Utiliza la URL de vídeo estándar de la barra de direcciones, no un enlace para compartir ni una URL acortada. Estos a veces rompen la detección de incrustación automática.

¿Cómo optimizo la velocidad de carga de vídeo en WordPress?

Habilita la carga diferida para que el reproductor de vídeo solo se cargue cuando un visitante se desplace hasta él. Utiliza una miniatura personalizada (imagen superpuesta) en lugar del reproductor predeterminado. El reproductor completo solo se inicializa al hacer clic, lo que reduce significativamente el peso inicial de la página.

Evita subir vídeos directamente a WordPress. Si te autoalojas, utiliza una CDN para servir el archivo desde servidores más cercanos a tus visitantes.

¿Puedo reproducir vídeos automáticamente en WordPress?

Sí, pero navegadores como Chrome y Safari a menudo bloquean la reproducción automática a menos que el vídeo esté silenciado. Para cumplir con los requisitos del navegador y los estándares de accesibilidad, los vídeos con reproducción automática deben iniciarse sin sonido e incluir controles de reproducción visibles.

Muchos constructores de páginas y plugins de vídeo, incluido SeedProd, te permiten activar o desactivar la reproducción automática y el silencio directamente en el panel de configuración del bloque.

Guías de WordPress más útiles

Tienes el vídeo incrustado, se reproduce rápido y no afectará negativamente a tu puntuación de velocidad de página. Ahora estás en una mejor posición que la mayoría de los sitios de WordPress que simplemente pegan una URL y esperan lo mejor.

Si deseas el máximo control sobre la colocación de vídeos en páginas de destino, barras laterales y plantillas de temas, Obtén SeedProd y podrás tenerlo configurado en una tarde.

Si busca más formas de mejorar su sitio de WordPress, es posible que las siguientes guías le resulten útiles:

• Cómo incrustar vídeos de Facebook en WordPress
• Cómo añadir iconos personalizados de redes sociales de WordPress a su sitio web
• Cómo asegurar su sitio de WordPress
• Cómo obtener soporte de WordPress (para principiantes)

¡Gracias por leer! Nos encantaría conocer tu opinión, así que únete a la conversación en YouTube, X y Facebook para obtener más consejos y contenido útil para hacer crecer tu negocio.