Muchos propietarios de sitios web desean añadir la reproducción automática de vídeos incrustados de Instagram a sus páginas para captar al instante la atención de los visitantes.
Desafortunadamente, pegar el código nativo en su sitio y esperar que el vídeo se reproduzca automáticamente le decepcionará.
Sé perfectamente lo frustrante que es dedicar tiempo a ajustar el código HTML solo para darse cuenta de que el iframe estándar de Instagram bloquea por completo la reproducción automática.
Se siente como un gran obstáculo cuando lo único que quieres es que tu contenido social dinámico destaque y mantenga el interés de los usuarios.
La buena noticia es que aún puede obtener los beneficios llamativos del vídeo en movimiento sin las desventajas del método manual defectuoso.
En esta guía, explicaré por qué falla la reproducción automática nativa y te mostraré una solución mucho mejor para reproducir tus vídeos sin problemas.
- ¿Se puede habilitar la reproducción automática en un vídeo incrustado de Instagram?
- La mejor manera de mostrar vídeos de Instagram incrustados en tu sitio web
- Cómo incrustar vídeos de Instagram en tu sitio web [método recomendado]
- ¿Listo para incrustar vídeos de Instagram de la forma correcta?
¿Se puede habilitar la reproducción automática en un vídeo incrustado de Instagram?
No, no se puede habilitar la reproducción automática en un vídeo estándar incrustado en Instagram.
Si has intentado añadir la reproducción automática a tu código de inserción de Instagram y no ha pasado nada, no eres el único.
En lugar de incrustar realmente el vídeo, el código oficial de incrustación de Instagram genera un iframe que muestra cómo se ve el vídeo.
Cuando un visitante hace clic en el vídeo, simplemente se le redirige a Instagram. Esto significa que estás perdiendo un visitante del sitio web, lo cual es un gran problema.
Aquí tienes un breve resumen de lo que necesitas saber:
- The native Instagram embed uses an <iframe>, and browsers block autoplay on <iframe> content from third-party sources by default.
- El sistema de incrustación propio de Instagram no admite el atributo de reproducción automática; añadirlo al código no tiene ningún efecto.
- Existe una solución alternativa que te permite obtener el mismo resultado llamativo sin depender de la reproducción automática defectuosa, y la explicaremos en esta guía.
¿Es realmente una buena idea la reproducción automática en las integraciones de Instagram?
La reproducción automática puede captar rápidamente la atención, pero tiene desventajas reales que vale la pena sopesar antes de decidirse a utilizarla.
La respuesta sincera es: depende de tus objetivos, ya que hay ventajas y desventajas genuinas en ambos lados.
Aquí tienes una visión equilibrada de los pros y los contras:
| El caso A FAVOR de la reproducción automática | El caso EN CONTRA de la reproducción automática |
|---|---|
| Capta al instante la atención del visitante. | Ralentiza la velocidad de carga de la página: los vídeos son recursos de gran tamaño. |
| Mantiene a los usuarios interesados en la página. | No compatible con incrustaciones nativas de Instagram. |
| Muestra contenido dinámico sin necesidad de hacer clic. | Los navegadores bloquean cada vez más la reproducción automática y el sonido. |
| Puede resultar intrusivo para los visitantes. |
La buena noticia es que hay una forma de obtener las ventajas del autoplay, que llama la atención, sin que la velocidad de la página se vea afectada.
La mejor manera de mostrar vídeos de Instagram incrustados en tu sitio web
El método manual de incrustación de Instagram falla para la reproducción automática porque no tienes control sobre cómo se comporta el reproductor de Instagram.
When you copy the official embed code from Instagram, it generates an <iframe> tag that loads Instagram’s external player directly onto your page.
Incluso si Instagram admitiera la reproducción automática, es probable que los navegadores modernos la bloquearan de todos modos.
«Como habrás notado, los navegadores web están adoptando políticas de reproducción automática más estrictas con el fin de mejorar la experiencia del usuario, minimizar los incentivos para instalar bloqueadores de anuncios y reducir el consumo de datos en redes costosas y/o con limitaciones».
– Chrome para desarrolladores
La conclusión es que la reproducción automática de vídeos incrustados de terceros se bloquea desde dos frentes a la vez: por parte de Instagram y por parte del propio navegador.
La mejor manera: consigue un comportamiento similar al de la reproducción automática con Instagram Feed Pro
Instagram Feed Pro es un plugin de WordPress que te permite disfrutar de las ventajas del autojuego, que llama mucho la atención, sin sus inconvenientes.
En lugar de cargar un archivo de vídeo pesado en el momento en que se abre la página, Instagram Feed Pro muestra una miniatura ligera.
Cuando un visitante hace clic en él, el vídeo se reproduce directamente en tu sitio web en una ventana emergente sin redirigirlo a Instagram.
Esto significa que obtienes una experiencia de vídeo dinámica y llamativa sin penalizar la velocidad de la página ni correr el riesgo de perder visitantes en Instagram.
Aquí tienes un resumen rápido de lo que puede hacer el plugin:
- Actualizaciones automáticas con tus últimas publicaciones de Instagram, sin necesidad de actualizar manualmente.
- Personalizador visual integrado para controlar el aspecto del feed de los vídeos de Instagram.
- Temas y plantillas prediseñados para elegir rápidamente un diseño llamativo.
- Admite feeds de Instagram con hashtags, @menciones, álbumes de fotos e historias.
- Los vídeos se reproducen en tu sitio web (en una ventana emergente), por lo que los visitantes no tienen que salir de tu página.
Dado que los vídeos solo se cargan cuando el visitante hace clic en «Reproducir», la velocidad de tu página se mantiene alta, incluso cuando muestras gran cantidad de vídeos.
Además de ofrecer a los visitantes una mejor experiencia, esto también es excelente para el SEO de tu sitio web.
¿Listo para añadir vídeos incrustados de Instagram y beneficiarte de la reproducción automática?
¡Puedes registrarte en Instagram Feed Pro aquí!
Cómo incrustar vídeos de Instagram en tu sitio web [método recomendado]
Aquí tienes una guía paso a paso sobre cómo configurar Instagram Feed Pro en tu sitio web de WordPress. El proceso completo dura unos 5 minutos.
Paso 1: Instalar y activar el plugin Instagram Feed Pro
Para empezar, tendrás que comprar y descargar Instagram Feed Pro desde aquí.
Una vez que tengas el archivo del plugin, instálalo y actívalo en tu sitio de WordPress (consulta esta guía para principiantes si necesitas ayuda con este paso).
Paso 2: Crear un feed de vídeos de Instagram
Ahora es el momento de crear tu primer feed de vídeo de Instagram. Ve a Feed de Instagram » Todos los feeds desde tu panel de control de WordPress.
Haga clic en el botón Añadir nuevo para iniciar el proceso de configuración.
A continuación, se le pedirá que elija un tipo de feed: puede seleccionar entre Cronología del usuario, Hashtag público o Publicaciones etiquetadas.
Una vez que haya hecho su selección, haga clic en Siguiente para seguir adelante.
Paso 3: Conecta tu cuenta de Instagram
En la siguiente pantalla, tendrás que conectar tu cuenta de Instagram para que el complemento pueda extraer tu contenido. Haz clic en el botón Añadir fuente para empezar.
Se le pedirá que elija un tipo de conexión: básica o avanzada.
Funcionamiento básico para un sencillo feed de Instagram que te permite mostrar tus propias publicaciones.
Por otro lado, una conexión avanzada te permite mostrar feeds de hashtags, historias de Instagram y menciones.
Seleccione el que se adapte a sus necesidades y haga clic en Conectar.
Como estamos utilizando una fuente básica, puedes hacer clic en el botón «Conectar con Instagram ».
Una conexión avanzada significa que tendrás que conectarte a través de Facebook, pero por lo demás el proceso es el mismo.
A continuación, puedes elegir dar al plugin acceso de solo lectura a tu cuenta de Instagram.
Nota: Dado que se trata de un acceso de solo lectura, el complemento solo puede ver tu información y no podrá realizar ningún cambio. Más información sobre por qué Smash Balloon es seguro.
Solo tienes que hacer clic en «Permitir» para dar permiso al complemento para acceder a tu cuenta.
Por último, selecciona tu cuenta de Instagram como fuente y haz clic en Siguiente.
Paso 4: Personaliza tus vídeos incrustados de Instagram
Aquí es donde puedes controlar exactamente cómo se ven tus vídeos de Instagram y qué contenido se muestra.
En la siguiente pantalla, selecciona un tema para el feed entre las opciones disponibles. Cada tema cambia los colores, los iconos, el estilo de las publicaciones y mucho más.
Después de seleccionar una opción, haga clic en Siguiente.
A continuación, pasa a seleccionar una plantilla que se adapte a tu diseño. Cada plantilla mostrará tus publicaciones con un diseño diferente.
Como antes, puede hacer clic en Siguiente para confirmar su elección.
Filtrar tu feed para mostrar solo vídeos
Si lo deseas, puedes utilizar esta fuente para mostrar vídeos y fotos de Instagram incrustados a la vez.
Para mostrar solo vídeos, primero haz clic en Configuración en la parte superior y selecciona Filtros y moderación.
Desplázate hacia abajo hasta la sección Mostrar tipos específicos de publicaciones.
Desmarca la opción Fotos para que tu feed solo muestre contenido de vídeo.
A continuación, puedes elegir si deseas mostrar vídeos de la fuente, carretes o ambos.
Una vez que esté satisfecho con su selección, haga clic en Guardar cambios.
Ahora haz clic en el botón Configuración para abrir el personalizador visual una vez más.
Esta vez, haz clic en la pestaña Personalizar en la parte superior.
Elegir un diseño de feed
A la derecha, tienes una vista previa en vivo de tus incrustaciones de Instagram. Y a la izquierda, tienes un panel con las opciones de personalización.
Primero, haz clic en Diseño del feed para ver los diseños disponibles.
A continuación, el panel mostrará cuatro diseños entre los que podrás elegir: Cuadrícula, Carrusel, Masonry o Destacado.
Una cuadrícula funciona muy bien para mostrar montones de publicaciones de Instagram a la vez. Por otro lado, puedes utilizar un diseño tipo mampostería para mantener las proporciones originales de tus vídeos de Instagram.
También puedes utilizar un diseño de carrusel para que tu sitio sea interactivo o destacar determinados vídeos con un diseño resaltado.
Haga clic en Guardar una vez que haya elegido su diseño.
Ajustar el estilo de publicación
En primer lugar, volvamos a las principales opciones de personalización. Solo tienes que hacer clic en el botón Personalizar situado en la parte superior izquierda.
Sin salir del personalizador, haz clic en Entradas para ajustar cómo aparecen las entradas individuales.
Desde aquí puedes personalizar el aspecto de cada publicación de Instagram con opciones como:
- Estilo del puesto
- Imágenes y vídeos
- Pie de foto
- Resumen de «Me gusta» y comentarios
- Estado al pasar el cursor
Por ahora, haz clic en la opción Estilo de publicación aquí.
En Estilo de publicación, puedes elegir entre Enmarcado o Normal, según el aspecto que prefieras.
Como antes, haz clic en Guardar para almacenar los cambios antes de continuar.
Se mostrará un vídeo enmarcado separado del fondo, y podrás elegir el color del fondo, el tamaño del borde y la sombra.
Del mismo modo, un vídeo normal de Instagram se insertará en la página o en el fondo de la barra lateral sin separación.
Paso 5: Añade vídeos incrustados de Instagram a tu sitio web
Una vez que hayas configurado y personalizado tus vídeos de Instagram, es hora de añadirlos a tu sitio web.
Instagram Feed Pro te ofrece dos formas sencillas de hacerlo: en una página o en un área de widgets de la barra lateral o el pie de página.
Cómo mostrar vídeos de Instagram incrustados en una página
Haz clic en el botón «Incrustar» en la parte superior para ver cómo añadir contenido de Instagram a tu sitio web.
Como puedes ver, Instagram Feed Pro te proporciona un código corto o te permite mostrar vídeos en una página o widget.
En la ventana emergente, puedes hacer clic en Añadir a una página.
Esto muestra una lista de las páginas que has publicado en tu sitio web.
Selecciona la página de WordPress en la que deseas que aparezca el feed y, a continuación, haz clic en Añadir.
Una vez que estés en el editor de páginas, haz clic en el icono más (+) para añadir un nuevo bloque.
Funciona igual que cualquier otro bloque de WordPress, sin necesidad de lidiar con códigos de inserción.
Busca «Instagram» y selecciona el bloque Instagram Feed de los resultados.
Cuando estés satisfecho con el aspecto final, haz clic en Publicar para que la publicación aparezca en tu página.
Cómo mostrar vídeos incrustados de Instagram en la barra lateral o el pie de página
También puedes añadir tus vídeos a un área de widgets si lo prefieres. Esto solo funciona si tu tema de WordPress admite widgets en la barra lateral o el pie de página.
Primero, ve a Instagram Feed » All Feeds y haz clic en el feed de vídeos de Instagram que has creado.
Al igual que antes, haz clic en la opción Insertar para abrir la ventana emergente.
Verás las mismas opciones que antes.
Esta vez, haz clic en la opción Añadir a un widget en la ventana emergente.
Una vez que esperes un segundo, el complemento te redirigirá a la página Widgets de tu sitio web.
Desde aquí, seleccione el panel Barra lateral o elija el panel Pie de página.
El último paso es el mismo en ambos casos, así que selecciona la ubicación que desees para tus vídeos.
Haz clic en el icono más (+) dentro del área del widget y selecciona el widget Instagram Feed para añadirlo.
Tu fuente de vídeo aparecerá ahora en el área de widgets que hayas elegido en tu sitio web.
¿Listo para incrustar vídeos de Instagram de la forma correcta?
Si quieres que tus vídeos de Instagram atraigan a los visitantes sin ralentizar tu sitio web ni redirigir a la gente a Instagram, Instagram Feed Pro es la solución más sencilla que hemos probado.
Obtienes el impacto visual de la reproducción automática, tiempos de carga ultrarrápidos y control total sobre el diseño de tus vídeos de Instagram.
¿Listo para añadir vídeos de Instagram incrustados en tu sitio web? ¡Consigue una copia de Instagram Feed Pro aquí!
Mientras estás aquí, también puedes consultar esta guía sobre cómo añadir el chat de Instagram a tu sitio web de WordPress.
