Reproductor de video responsivo con Vue

IFRAME

Para crear nuestro reproductor de video en nuestra página web hecha con Vue js utilizaremos la etiqueta iframe.

Este elemento HTML nos permite incrustar contenido de otras páginas web en la nuestra y poder visualizarlo, algunos de los elementos que se pueden incluir dentro de esta son documentos y videos de YouTube, como ejemplo.

ANTES DE EMPEZAR

Lo primero que tendremos que hacer antes de empezar con nuestro reproductor de video es crearnos nuestro proyecto de Vue js sobre el que trabajaremos, esto se hará a través de la consola de comandos, una vez nos hayamos situado en el directorio donde queremos guardar nuestro proyecto tendremos que descargar Vue js para poder usarlo, esto se hará mediante el siguiente comando:

npm install -g @vue/cli

Una vez haya terminado la instalación tendremos que crear nuestro proyecto de Vue js, para esto utilizaremos:

vue create nombreProyecto

Ya creado el proyecto entraremos en este con:

cd nombreProyecto

Y desde aquí abriremos el codigo del proyecto para empezar con la creación:

code .

CREACIÓN

Lo primero que haremos será importar Bootstrap para darle un mejor diseño a la página, para hacer esto deberemos copiar las siguientes líneas en index.html:

Tras esto vamos a crear el componente sobre el que trabajaremos, daremos click derecho sobre la carpeta components que se nos crea y hacemos click sobre new File, yo en este caso lo llamaré Galeria.vue, muy importante la extensión .vue para que el programa identifique que es un documento de Vue js.

Una vez creado el componente lo primero que vamos a hacer será añadirle dos etiquetas al cuerpo:

<template> donde meteremos nuestro diseño y <script> donde definiremos el comportamiento de la página.

DISEÑO

Vamos a comenzar con el diseño de nuestra página, lo primero añadiremos un título y tras de esto un contenedor <div> donde incrustaremos el resto de componentes.

Una vez creado el contenedor, dentro de este añadiremos una etiqueta <input> de tipo text con un value que tendrá que ser la id del video que queramos mostrar como ejemplo, en mi caso será ZEFrbP7wYZU y un parámetro v-model que será el cual defina el video a mostrar.

Esta etiqueta hará que el usuario pueda introducir la id del video que quiera reproducir.

A continuación vamos a crear la etiqueta <iframe> a esta le daremos unos parámetros para controlar su funcionamiento y diseño.

Y por último paso opcional un párrafo donde mostraremos el id del video que se está reproduciendo en cada momento, con esto habríamos acabado el diseño y ahora pasaremos a configurar la funcionalidad de la página.

FUNCIONALIDAD

Dentro de la etiqueta <script> lo primero que haremos será escribir export default y abriremos unas llaves, entre estas llaves es donde trabajaremos.

vamos a comenzar dándole un name, en este caso galería y con data vamos a crear las variables, dentro de un return, que usamos en el diseño.

A remarcar las variables responsive y url, la primera hará que nuestro reproductor de video sea susceptible a cambios, en este caso al cambio de id del video a mostrar, la segunda será la url que pondremos delante de la id del video, esta es necesaria para que el video se pueda mostrar.

Por último en el archivo App.vue importaremos nuestro componente Galeria.vue y lo llamaremos, con esto tras ejecutar el comando yarn serve en la consola podremos ver nuestra aplicación web en la IP que nos facilitará la propia consola.