La guía definitiva para incrustar videos en su sitio web

Ya no se trata de saber cómo agregar videos a su sitio web traerá un valor real inigualable para usted y los visitantes de su sitio. Desde mejorar la experiencia del usuario (en nuestra cultura impulsada por lo visual, las personas prefieren ver a leer) hasta brindar beneficios de SEO a su sitio. Más tiempo en el sitio, tasas de clics más altas, conversiones mejoradas y, por lo tanto, ingresos, son algunos de los beneficios claros de insertar videos en su sitio web.

Sin embargo, una simple carga no será suficiente en este caso. La incrustación de video en su sitio web es realmente el camino a seguir. La incrustación de video puede parecer un trabajo de rutina, sin embargo, no es tan claro. Con tanta información aquí y allá sobre cómo incrustar un video de un lugar a otro, nuestro objetivo es crear una guía definitiva para incrustar videos en su sitio web, que lo cubra todo.

¡Entremos de inmediato!

Parte I:¿Qué es una inserción de video?

En primer lugar, es importante comprender qué hay detrás del elemento principal de una inserción de video:un código de inserción. Un código de inserción es un fragmento de código HTML que puede usar para agregar videos y otros tipos de contenido a su sitio web.

Código de inserción es un fragmento de código HTML que puede usar para agregar videos y otros tipos de contenido a su sitio web.

Este fragmento de código ayuda a mostrar el video en su sitio web. Extrae el video de su fuente original, sin realmente "forzarlo" a alojarlo en su sitio web. Esto implica que no tendrá que preocuparse de que un video afecte el tiempo de carga de su sitio web, y también abre una serie de opciones entre varios servicios de alojamiento de videos que mejor se adaptan a sus necesidades.

Aunque la mayoría de los servicios de alojamiento de videos ofrecen generación de inserción automática, no estará de más comprender la estructura básica del código de inserción de video:

En lugar de la parte de la URL, solo agregue el enlace al video y listo, ahí está su código HTML. Conocer un poco de HTML también le permitirá ajustar el código de inserción manualmente:agregar la altura y el ancho necesarios, o bloquear características particulares del video que no desea mostrar en su página. Puede verse así:

Puede preguntarse en este punto:¿por qué no puede simplemente cargar el video en su sitio y terminar con la molestia? Google a menudo dice que los videos agregan un tiempo significativo de carga del sitio web, disminuyen la velocidad del sitio y, por lo tanto, afectan la experiencia del usuario y tienen un impacto negativo en su SEO. Por lo tanto, puede perder tráfico, clasificaciones, etc. Por no hablar de servidores sobrecargados, costes extra, etc.

Incrustar videos en un sitio web lo ayudará a superar la mayoría de estos problemas. Este es el por qué.

Parte II:Incrustar, no cargar: las ventajas clave de un video incrustado

1. Incruste un video en un sitio web para tiempos de carga de video más altos (y SEO)

Cuando carga un video en su sitio, su video puede tardar años en cargarse, lo que, a su vez, afecta el tiempo de carga de la página. Por lo tanto, los visitantes de su sitio pueden experimentar una carga de video lenta, pausas inesperadas y la negativa general a reproducir. Incrustar videos puede ayudarlo a mantener la velocidad de su sitio a un ritmo equilibrado y no tener efectos negativos en la experiencia del usuario. Y, según John Mueller de Google, la velocidad del sitio es uno de los factores clave de clasificación en nuestra era de dispositivos móviles.

¿Por qué deberías preocuparte por eso? Aquí hay un gráfico que muestra cómo el tiempo de carga del sitio afecta las conversiones:

Fuente:Crisp Video

Entonces, básicamente, un tiempo de carga más bajo significa clasificaciones más bajas, menos tráfico, menos conversiones y… ¡pérdida de ingresos!

Pero no creas que agregar un video solo te causará problemas. Tener un video reproducido en su sitio web tendrá un impacto significativo en la cantidad de tiempo que las personas pasan en su sitio (factor de clasificación positivo), y también el video en sí puede aparecer en la página n.° 1 de Google, lo que genera tráfico y todo lo demás que sigue. Por lo tanto, todo es cuestión de hacer las cosas bien y elegir la opción de inserción sobre la carga.

2. Insertar video en un sitio web para superar las limitaciones de ancho de banda

Subir un video agota el ancho de banda de su propio servidor (lo que tiene un costo). Y cada vez que alguien vincula o inserta su video en su sitio web, su propio sitio sufre ya que están utilizando su ancho de banda una vez más. Esto es costoso e ineficiente.

3. Incruste un video en un sitio web para evitar el tamaño del archivo y los límites de almacenamiento

El alojamiento de su sitio siempre tiene un límite de almacenamiento, por lo que, en general, cada vez que carga un video, está ocupando espacio en su servidor. Al cargar varios videos, puede ocupar demasiado espacio y, si varios usuarios ven su video simultáneamente, los tiempos de carga de su sitio podrían ralentizarse drásticamente.

Además, también existe una cuestión de limitación del tamaño del archivo para la carga de videos. Lo más probable es que la plataforma de alojamiento de su sitio tenga restricciones estrictas en el formato de video y el tamaño de los archivos, por lo que se encontrará comprimiendo el video hasta un punto inútil. La incrustación de video no le dará estas restricciones.

Fuente:ProPhoto

4. Incruste un video en un sitio web para obtener una mayor calidad de video

Desde las restricciones de tamaño de archivo, estamos llegando a limitaciones de calidad de video cuando se trata de cargar videos en un sitio. Si desea mostrar su video de alta calidad en el que ha trabajado arduamente en su sitio web, almacenarlo en un sitio de terceros garantiza que permanecerá dentro de su "límite de inodos", la estructura de datos que mantiene la información sobre el archivo en su cuenta de alojamiento. Por lo tanto, no tendrá que pensar en convertir sus archivos de video en múltiples formatos y versiones para permitir que sus visitantes vean sus videos en alta definición o en una resolución más baja.

Parte III:Elegir un sitio de alojamiento de videos

Básicamente, al elegir incrustar videos en su sitio web, está dejando todas las preocupaciones sobre la carga del servidor y los cambios de formato de archivo a alguien que tiene el tiempo y los recursos para eso. Pero, como probablemente comprenda, para incrustar un video en su sitio web, primero debe agregarlo a una plataforma de alojamiento de videos de terceros. Y aquí tienes muchas opciones.

No existe el mejor o el peor concepto de host de video, es realmente una cuestión de equilibrio entre las funciones adecuadas y el costo. Por lo tanto, hemos resumido las características clave a tener en cuenta antes de elegir el sitio de alojamiento de videos adecuado:

Reproductor receptivo

Su sitio de alojamiento de videos debe ofrecer un reproductor de video receptivo, un widget de medios enriquecidos compatible con dispositivos móviles, que está diseñado para brindar a su audiencia la mejor experiencia de usuario y visualización. Independientemente de si miran desde una pantalla de escritorio, teléfono inteligente, tableta o cualquier otro tamaño de pantalla, el video se expande para llenar el ancho de la pantalla pero mantiene la relación de aspecto original de los videos. Esto ayuda a evitar el tamaño estático que potencialmente puede distorsionar los diseños de página, deformar la imagen o mostrar barras negras alrededor del video.

Rapidez y calidad de servicio

Cuando elige un alojamiento de video, desea asegurarse de que brinden el mejor servicio. Entonces, hay un doble entendimiento de lo que implica una buena velocidad y calidad de servicio:

• Soporte para una excelente calidad de video: En 2020, realmente no puede permitirse imágenes y animaciones granulosas en 360p o 480p. Por lo tanto, a menos que tenga un presupuesto bajo y 1080p sea suficiente para sus propósitos, asegúrese de que el servicio de alojamiento de video que elija sea compatible con Ultra HD o más. Las mejores plataformas que existen te ofrecen cambiar automáticamente entre calidad HD/SD.
• Excelente soporte y servicio al cliente: Vuelva a comprobar la calidad de los servidores que utiliza el servicio. ¿El sitio se bloquea de vez en cuando (¡esto afectará la visualización de video en su sitio web!)? ¿Es en absoluto propenso a los ataques DDoS? Y, lo que es más importante, ¿cuál es el tiempo medio de respuesta a las consultas de sus clientes?

Opciones de configuración del reproductor

Las primeras impresiones son importantes, por lo que lo primero que le llama la atención a usted y a sus clientes es el diseño del reproductor de video. Desde colores hasta botones, reproducciones automáticas y configuración de todos los comandos necesarios:cuanto más personalizable sea el reproductor de video, mejor.

Opciones de personalización del reproductor de video en el alojamiento de Wave.video

Características de generación de prospectos

Si está agregando un video a su sitio web, se convierte en una parte de su máquina de generación de prospectos. Por lo tanto, asegúrese de que la plataforma de video que elija realmente admita la generación de prospectos a través del video. Esta característica incluye cosas como llamadas a la acción y formas de capturar la información de sus visitantes (clientes potenciales). De lo contrario, es básicamente un reproductor de video por el que estás pagando.

Privacidad

Al operar en línea, la privacidad es un factor obvio a considerar. Lo mismo se aplica a la privacidad de tus videos. Es importante que la plataforma de alojamiento de videos que elija no permita que todos vean o descarguen sus videos sin su permiso. Por lo tanto, el servicio de alojamiento debería darle la opción de imponer reglas estrictas sobre la descarga de cosas y una forma eficiente de hacer cumplir esas reglas. La capacidad de proteger sus videos con una contraseña es una función que debe tener en cuenta al elegir una plataforma de alojamiento de videos.

SEO 

Si desea jugar con la clasificación de su propio sitio, debe ser estratégico en su elección de una plataforma de alojamiento de videos. Busque un servicio de alojamiento que sea estable y popular (es decir, alto en la clasificación en sí mismo) y aproveche su participación en la clasificación de Google. En primer lugar, alojar su video en un sitio externo le proporcionará enlaces salientes o vínculos de retroceso. , y potencialmente facilitará la obtención de fragmentos enriquecidos de video para su propio dominio. Por lo tanto, esto también le dará la oportunidad de influir en la clasificación de su sitio.

Fuente:Moz

Análisis y recopilación de datos

Sus videos están diseñados para atraer y complacer al cliente, por lo que, naturalmente, querrá saber qué tan satisfechos están los clientes. Por lo tanto, el servicio en el que aloja su video debería brindarle una gran cantidad de análisis para ver. Y no solo cosas simples como vistas, comentarios, sino un tipo completamente diferente de datos complejos. Incrustar videos le permite agregar un código de seguimiento especial – de Google Tag Manager – y obtenga análisis adicionales dentro de su cuenta de Google Analytics, como el tiempo de visualización promedio, el momento en que las personas generalmente dejan de mirar, etc. Necesitas todos estos datos para saber cómo y por qué tus videos tienen éxito (o no).

Coste

Una vez que se haya asegurado de haber considerado todas las funciones que necesita, esté satisfecho con la plataforma y el soporte, y tenga claro la calidad del video, lo último es asegurarse de que la plataforma esté dentro de su presupuesto. . Y esto depende de cuántas vistas de video anticipa y qué tan grandes son sus archivos de video. Más vistas de videos más grandes implicarán que está utilizando más ancho de banda y, por lo tanto, el precio aumentará. También vale la pena verificar si la plataforma permite contratos mensuales o anuales. Si tiene una pequeña empresa o acaba de empezar con el video, probablemente no querrá estar atado a contratos a largo plazo.

Parte IV:Cómo generar el código de inserción

Una vez que haya elegido su plataforma de alojamiento de videos y cargado todo su contenido de video, solo hay un paso que lo separa de agregar/incrustar un video en su sitio web:encontrar ese código de inserción.

Incrustación de videos de v servicios de alojamiento de vídeos

Incrustación desde Wave.video

Para incrustar un video de Wave.video, vaya a Mis proyectos y encuentra el video que deseas incrustar. Luego, coloca el cursor sobre el icono de los tres puntos y haz clic en “Reproductor”.

Active la palanca que dice "Incrustar video" y Wave.video generará automáticamente un código de inserción para su video. Debajo de la palanca, también encontrará la configuración del tamaño del video, así que no olvide hacer uso de esta función.

Para personalizar el reproductor de video, abra la pestaña "Apariencia" y cambie el color del reproductor, defina qué controles se muestran (si los hay) o elija una miniatura personalizada. Si desea obtener más información sobre las funciones de alojamiento de Wave.video, asegúrese de leer este artículo.

Hay varias opciones para insertar videos con Wave.video en su sitio web o blog.

• Incrustación en línea

Esta es una inserción regular que colocará su video dentro del texto circundante u otros elementos de la interfaz de usuario de su página.

• Incrustación emergente

Incrustar un video de esta manera lo abrirá en un cuadro de diálogo modal que aparece sobre el resto del contenido.

Hay tres formas de integrar su video en el contenido de su página:miniatura, resaltado y enlace de texto.

Miniatura

Una inserción en miniatura se parece a la inserción en línea normal. La diferencia es que el video se reproducirá en una ventana emergente que aparecerá encima del otro contenido.

Destacados

Este tipo de incrustaciones recuerda a las populares Historias destacadas de Instagram. Esta es una excelente manera de integrar bien los videos en su contenido para que los visitantes de su sitio web conozcan las novedades, las últimas noticias, las ofertas especiales o algún video detrás de las cortinas.

Enlace de texto

Si no desea dividir el texto con ninguna imagen, pero aún desea brindarle a su lector una manera fácil de ver el video, utilice esta forma de insertar el video.

Agregue una frase de texto y vincúlela a su video. El video aparecerá en la parte superior de la página al hacer clic en ese enlace.

Insertar desde YouTube

Simplemente vaya a la página de reproducción de YouTube de su video, haga clic en el botón "Compartir" y luego en "Incrustar". Simplemente puede copiar el código de inserción o trabajar en algunas opciones personalizables:mostrar/cubrir los controles del reproductor o reproducir el video desde un punto determinado (no necesariamente desde el principio).

Si desea una mayor personalización, hay muchos parámetros (reproducción automática, color, idioma, bucle y más) que puede agregar dentro de la inserción de iframe. Todos están enumerados en la página de Desarrolladores de Google.

Cómo incrustar un video de YouTube

Incrustación desde Vimeo

El código de inserción de Vimeo se puede encontrar haciendo clic en el ícono Compartir a la derecha del video. Verá una ventana con varios marcos, y uno de ellos es su código de inserción.

Al hacer clic en +Mostrar opciones, puede personalizar la forma en que se mostrará su video con este código de inserción. Puede modificar el color del reproductor, su tamaño (mantenerlo receptivo, por si acaso), agregar una introducción y agregar algunas "cosas especiales" como bucles, reproducción automática y más.

Al pasarse a Pro, Business o Premium, puede ver algunas ventajas adicionales, como personalizar colores y componentes, agregar pantallas finales y logotipos.

Incrustación desde Wistia

Vaya a su página de medios y haga clic en el botón Insertar y compartir. Verá una pantalla Insertar y compartir, donde puede copiar su tipo de código de inserción y modificarlo para su página.

Wistia ofrece dos tipos de códigos de inserción:incrustaciones en línea e incrustaciones Popover. Los códigos de incrustación en línea implican posicionar el video en línea con el resto de su contenido, mientras que las incrustaciones Popover ayudan a que sus videos se destaquen sobre el contenido de su página.

Incrustación desde Vidyard

Tenga en cuenta que para la incrustación de video de Vidyard, debe tener la función Player Embeds con su plan. Vidyard admite dos opciones de inserción:inserción receptiva e inserción iframe.

En el panel de su Vidyard, haga clic en la sección Contenido>Reproductor, desplace el cursor sobre el reproductor y luego haga clic en "compartir". En la parte Responsive Embed, simplemente haga clic en el icono Copiar código y elija la opción Usar caja de luz para convertir el código en una caja de luz incrustada. Puede ingresar manualmente las dimensiones del reproductor para obtener el ancho y la altura máximos.

Si su sitio web no es compatible con JavaScript, puede seleccionar ¿Problemas para incrustar? casilla de verificación y copie el código de incrustación de iframe en su lugar.

Insertar videos de s redes sociales 

Insertar desde Facebook

Cada video en Facebook es compatible con la función de inserción. Todo lo que tiene que hacer es hacer clic en "..." en la esquina superior derecha de la publicación de Facebook y presionar "Incrustar".

Si lo desea, puede elegir la opción "Incluir publicación completa" (solo presione la casilla de verificación) y agregará el texto correspondiente de la publicación de Facebook junto con el video.

Incrustación desde Instagram

Dado que Instagram es propiedad de Facebook, el proceso de incrustación es muy similar. Abre Instagram desde un escritorio (no desde la aplicación) y haz clic en "..." en la esquina superior derecha.

Presiona en “Insertar” y copia el código de inserción. Una vez más, tendrá la opción de agregar (o no) el título a su inserción.

Incrustación desde Twitter

Para incrustar un video de Twitter, no use la aplicación. Abra el tweet en una computadora de escritorio y seleccione "Incrustar tweet" en el menú desplegable, ubicado junto al botón "Seguir" en el Tweet. Luego, elige la opción "Insertar Tweet".

Simplemente copie/pegue el código de inserción, pero tenga en cuenta que con la inserción de Twitter, se mostrará el Tweet completo con el título, no hay opción para mostrar un solo video.

Incrustación desde TikTok

Con TikTok, el botón "Obtener código de inserción" aparece justo en el video. Aunque no hay opciones para elegir, ya que todo lo que obtendrá es un enlace para el reproductor de 340 × 700 con reproducción automática, puede modificar algunas configuraciones al agregar el código de inserción a su página web.

Uso de un método alternativo:generadores de código de inserción de video

Si por alguna razón no desea seguir los sencillos pasos para obtener los códigos de inserción para su video de los sitios de alojamiento de videos o las redes sociales, ciertamente hay una solución.

Hay un método alternativo:puede encontrar muchos sitios especiales que son inherentemente solo generadores de código de inserción de video. Plataformas como Embed.ly, Toolki y Siege Media le permiten generar un código de inserción para su video:todo lo que tiene que hacer es tener a mano la URL de los videos y estos sitios crearán automáticamente un código de inserción para su video.

Pero, esta solución viene con algunos inconvenientes:

• Por lo general, el video recién incrustado en su sitio tendrá la marca de agua de la plataforma
• Hay una capacidad de personalización de video muy limitada
• Estas plataformas no ofrecen análisis ni la posibilidad de agregar un código de seguimiento para seguir las estadísticas de su video en Google Analytics o plataformas analíticas de terceros.

Por lo tanto, si tiene la oportunidad de utilizar una plataforma de alojamiento de videos, elija siempre esta opción.

Parte V:Cómo incrustar un video en su sitio web

Ahora, cuando esté equipado con el conocimiento sobre las ventajas de la incrustación de video, sepa cómo elegir el servicio de alojamiento de video adecuado y cómo generar el código de incrustación, lo guiaremos rápidamente a través de los detalles de cómo incrustar un video. a las plataformas de alojamiento de sitios más populares.

Inserción de vídeos en HTML

PASO 1:EDITA TU HTML

Abra la página en la que desea incrustar el video en el modo de edición. Seleccione el lugar preciso en el código en el que desea que aparezca su video y coloque el cursor allí.

PASO 2:COPIAR Y PEGAR EL CÓDIGO INTEGRADO

Copie su código de inserción y simplemente péguelo en el lugar donde colocó el cursor. Pulsa, “guardar” o “publicar”, y listo.

Vuelva a verificar si el video se muestra exactamente donde colocó el código y no olvide monitorear el rendimiento de su página y video.

Inserción de vídeos en WordPress

Si su sitio web se ejecuta en WordPress, hay dos opciones para incrustar un video.

OPCIÓN #1:COPIAR/PEGAR LA URL

Para las plataformas de alojamiento de videos más populares como Vimeo, YouTube y algunas otras, no necesita buscar el código de inserción completo. Simplemente copie la URL del video y péguela en el editor visual; el código de inserción se generará automáticamente.

OPCIÓN #2:UTILIZAR EL CÓDIGO INTEGRADO

A veces, desea agregar algunos ajustes a la visualización del video, o puede alojar sus videos en una plataforma que no es compatible con la inserción automática de WordPress. Ahí es cuando tendrás que usar el código de inserción del video.

Vaya al editor de texto de WordPress (no lo confunda con el editor visual) y verá la versión HTML de su página. Luego, simplemente siga los pasos que mencionamos anteriormente en la sección HTML de esta guía sobre cómo incrustar videos en su sitio web.

Incrustar videos en Shopify

PASO 1:COPIAR EL CÓDIGO INTEGRADO

El primer paso es muy simple:simplemente copie el código de inserción desde donde está alojando su video.

PASO 2:INICIA SESIÓN EN TU PANEL DE ADMINISTRACIÓN DE SHOPIFY

Inicia sesión en tu panel de administración de Shopify. Todas sus páginas actuales deben aparecer en Tienda en línea -> Páginas. Navegue a la página que desea editar y tome nota de los símbolos en la barra de herramientas del editor.

Paso 3:HAGA CLIC EN EL BOTÓN "INSERTAR VÍDEO"

Elija el editor de texto enriquecido y, en la barra de herramientas, haga clic en el icono de la cámara de vídeo. Aparecerá una nueva ventana:simplemente pegue el código de inserción del video y seleccione la opción "Insertar video". ¡Ahí tienes!

Insertar videos en Squarespace

Cuando se trata de incrustar, Squarespace es muy similar a WordPress. Puede elegir entre la opción de usar un código para insertar o para insertar videos copiando y pegando la URL del video (solo es posible cuando se inserta desde YouTube, Vimeo, Animoto o Wistia).

Dado que Squarespace es un creador de sitios web, solo agregue cualquier bloque que admita video y simplemente copie/pegue la URL de su video, o presione el ícono de inserción (resaltado en un círculo rojo), luego verá una ventana emergente donde puede copia/pega tu código de inserción.

En Squarespace, puedes modificar el título y la descripción del video y, al desmarcar la opción "Usar miniatura", también puedes agregar una miniatura personalizada para tu video en esa página.

Incrustar videos en Wix

Wix funciona con principios similares a los de las plataformas de alojamiento de sitios anteriores. Solo la opción de copiar/pegar URL para la inserción de video admite videos alojados en YouTube, Vimeo, DailyMotion y Facebook.

OPCIÓN #1: COPIAR/PEGAR LA URL

Paso 1:Abre el Editor

Haga clic en el ícono "+" en el lado izquierdo del Editor y elija Video. En Reproductor de videos individuales, elija la plataforma en la que está alojado su video:YouTube, Vimeo, DailyMotion o Facebook.

Paso 2:Copia la URL de tu video

Haga clic en "Cambiar video" y copie la URL del video que desea mostrar. En este paso, puede modificar las opciones de reproducción y control.

Paso 3:Ajusta la posición de tu video

Use arrastrar y soltar para cambiar la posición y el tamaño de su video. ¡Y solo guarda la página!

OPCIÓN #2:UTILIZAR EL CÓDIGO INTEGRADO

Si no está alojando sus videos en las plataformas compatibles con Wix, deberá copiar el código de inserción de su video. Y luego, en lugar de seleccionar agregar un video, deberá presionar "Más". Aquí es donde encontrará el iframe HTML, donde puede pegar el código de inserción. Presiona "Guardar" y listo.

Palabras finales

Parece que hemos cubierto prácticamente todo lo relacionado con la inserción de videos en su sitio web. Después de una lectura tan extensa, todo lo que tenemos que decir es que agregar un video a su sitio aportará valor no solo a su departamento de SEO, análisis e ingresos. A las personas les encantan los videos y aprecian el tiempo que inviertes en crear contenido valioso, entretenido y fácil de digerir. Todo lo que tienes que asegurarte es que tus videos no afecten la experiencia del usuario, y las incrustaciones de video son una gran herramienta para eso.

Por favor, háganos saber en los comentarios si hay algo que le gustaría que agreguemos a esta guía. ¿Qué preguntas aún quedan sin respuesta? ¿Con qué plataformas de alojamiento de videos o servicios de alojamiento de sitios le gustaría que actualicemos esta guía? ¿Cuáles son sus luchas y desafíos cuando se trata de incrustar videos en su sitio web y brindar la mejor experiencia de usuario?