Insertar vídeo responsive

por

En este artículo, vamos a explicar cómo insertar un vídeo en nuestra web de forma responsive, directamente y sin necesidad de utilizar otros plugins, utilizando solo HTML. Para ello, solo necesitamos estas sencillas etiquetas HTML:

<video width="100%" autoplay controls loop>		
  <source src="videos/mi_video.mp4" type="video/mp4">
</video>

Con este sencillo código podemos insertar un vídeo de forma responsive siempre y cuando dispongamos de los archivos en nuestro propio servidor, aquí puedes ver un ejemplo en gestorligas.com, donde he resaltado el div contenedor.

Insertar video responsive
Insertar vídeo responsive

La explicación del código es la siguiente. El elemento <video> se utiliza para decirle al navegador que queremos incrustar un vídeo en el documento HTML.

Esta etiqueta puede tener unos atributos complementarios que son los siguientes.

  • El atributo <width=»100%»> permite ajustar el tamaño del vídeo al 100% del ancho de su contenedor, por ejemplo un <div>. Es a este <div> al que le aplicaremos las reglas CSS para hacerlo responsive y el vídeo se ajustará automáticamente al 100% de su ancho. Evidentemente tambien podemos indicar un width=»80%» y el vídeo se ajusta siempre proporcionalmente al 80% del <div> contenedor, pero no tiene mucho sentido definir dos veces el ancho del video.
  • El atributo <autoplay>se utiliza para indicar que el vídeo debe empezar a reproducirse tan pronto como sea posible, sin esperar a cargar completamente todo el vídeo
  • El atributo <controls>indica que se deben mostrar los controles para permitir que el usuario controle la reproducción de vídeo, incluyendo volumen, búsqueda y pausar/reanudar reproducción.
  • El atributo <loop>indica que al finalizar la reproducción del vídeo volverá a reproducirse de nuevo en un bucle continuo

Dentro del elemento <video> añadimos la ubicación del vídeo que queremos insertar de forma responsive con la etiqueta <source> la cual tiene dos atributos:

  • El atributo <src> es el atributo habitual para indicar la URL con la ubicación del archivo de vídeo.
  • El atributo <type> especifica el tipo de recurso que queremos incrutar, en este caso video/mp4

Insertar video responsive externo

Para insertar un vídeo responsive de una fuente externa, como los videos de otras fuentes de Internet, deberemos hacerlo mediante las etiquetas <iframe></iframe>, como en el siguiente ejemplo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Este código de ejemplo de YouTube se puede obtener en sus opciones «Compartir» + «Insertar», aquí las dimensiones del <iframe> se establecen en píxeles. También podemos cambiar el ancho con width=»100%» pero en el caso de vídeos externos la altura no se ajusta proporcionalmente a su ancho y debemos especificarla con height.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario