¿Cómo insertar un vídeo en tu web sin morir en el intento?

Home/Diseño Web, YouTube/¿Cómo insertar un vídeo en tu web sin morir en el intento?
  • Cómo insertar un vídeo en tu web sin morir en el intento

Incluir el video marketing en la estrategia de contenidos es una opción cada vez más extendida entre las empresas. Según un estudio de Hubspot, publicado a principios de este mismo año, el 81% de las marcas ya lo está haciendo.

El video marketing no solo sirve para enviar un mensaje que capte la atención de los usuarios, sino que también ayuda a mejorar el posicionamiento de nuestra marca y de nuestro sitio web. Conseguir posicionar un vídeo en Google puede ser una buena fuente de visitantes y reportarnos mayor visibilidad.

Pero ahora viene la cuestión más importante. Una vez que tengamos nuestro vídeo, ¿cómo lo insertamos en nuestro sitio web?

Insertar vídeo desde Youtube

En primer lugar, si no tenemos muchos conocimientos de diseño web, lo mejor es que acudamos a una plataforma externa como Youtube, que nos permita subir nuestro vídeo de una forma intuitiva.  Una vez lo tengamos subido, tan solo tendremos que seguir estos sencillos pasos para insertarlo en nuestra web:

  1. Abrimos Youtube y buscamos nuestro vídeo.
  2. Debajo del vídeo, habrá un botón para compartir. Lo clicamos.
  3. Nos aparecerá una ventana, con los distintos logotipos de las redes sociales. En uno de ellos aparecerá la palabra ‘Insertar’. Si clicamos, se nos desplegará el vídeo y a la derecha aparecerá un código parecido a este:<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/Ze7Ms449WmY” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
  4. Copiamos y pegamos en nuestro sitio web el código. Podemos modificar el ancho variando la cifra “width” o el alto variando la cifra “height”.

Esta es la opción más recomendada, ya que nos permite visualizar el vídeo en HD, en cualquier dispositivo y no nos ocupa espacio en nuestro servidor. Además, como Youtube pertenece a Google, es posible que lo tenga más en cuenta a la hora de posicionarlo.

Insertar vídeo por HTML

Sin embargo, si por el motivo que sea, queremos insertar nuestro vídeo por HTML hay otros aspectos que debemos tener en cuenta.

En primer lugar, debemos considerar el formato del vídeo. Como aún no se ha establecido un estándar único, podemos afirmar que el más extendido y soportado por los dispositivos y navegadores es el formato MP4. Sin embargo, también debemos incluir el vídeo de sustitución en los formatos WEBM u OGG, por si acaso.

También es importante el sistema de codificación del vídeo. Si escogemos la codificación H.264 no deberíamos tener problema para visualizarlo.

El peso del vídeo también es un factor decisivo, ya que si el archivo pesa demasiado puede ralentizar la carga de la página. Es muy importante que el tiempo de carga sea el mínimo posible, y para ello debemos reducirlo al peso máximo que nos permita sin perder calidad.

Reducir tamaño del vídeo

Si quieres modificar el formato o reducir el tamaño del vídeo y no sabes cómo hacerlo puedes utilizar el reproductor VLC. Tan solo tendrás que seguir los siguientes pasos:

  1. Abre el VLC
  2. Selecciona Medio > y dale a Convertir
  3. Añade el vídeo que quieras reducir de tamaño
  4. Clica el botón de Convertir/Guardar
  5. Selecciona el perfil H.264 + MP3 (MP4), o Webm, o OGG.
  6. Selecciona la ubicación donde quieres que se guarde y dale a Iniciar.

Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML <video>.  El código quedaría así, solo tendríamos que modificar la ruta y poner la de nuestro vídeo.

<video src=”videos/2018/09/videodeprueba.mp4” width=”560″ height=”315″></video>

Al igual que ocurría en el código de Youtube podemos modificar el ancho variando la cifra “width” o el alto variando la cifra “height”.

Insertar diferentes formatos

Para que se nos muestre en el formato más adecuado de los que hemos mencionado anteriormente, deberíamos utilizar la etiqueta video que quedaría de la siguiente forma:

<video>
<source src=”videos/2018/09/videodeprueba.mp4″ type=”video/mp4″ />
<source src=”videos/2018/09/videodeprueba.ogg” type=”video/ogg” />
<source src=”videos/2018/09/videodeprueba.webm” type=”video/webm” />

</video>

El mundo del video en HTML es bastante complejo, pero siguiendo estos sencillos pasos no deberíais tener ningún problema en insertar un vídeo en vuestro sitio web y que se visualice correctamente en todos los dispositivos y navegadores.

¿Cómo insertar un vídeo en tu web sin morir en el intento?
Total 5 Promedio 5
By |septiembre 18th, 2018|Tags: , , |Comentarios desactivados en ¿Cómo insertar un vídeo en tu web sin morir en el intento?