Youtube APP con Vue JS 2 y Bootstrap

2 minuto(s)

En esta página:

Demo Github

Demo Github

En la actualidad existen muy buenos Frameworks Javascript como Angular JS y React JS, de hecho todos solucionan los problemas de desarrollo de nuestra APP, pero siempre se diferencian, quizás algo que me llamo la atención de Vue JS es que es muy limpio, pero de todas maneras si se hace una aplicacion mas compleja y grande hagamos el código mas extenso, pero aun así creo que Vue JS Mantiene una simpleza y un codigo limpio y obvio muy potente, pienso que si Vue JS sigue mejorando más, puede destronar a los Frameworks como Angular JS y React JS que son usados en aplicaciones robustas, las grandes empresas como Google y Facebook las emplean en sus interfaces.

En este tutorial voy a crear una aplicación en donde podremos ver un video de youtube, con solo colocar el ID del video de Youtube que deseamos ver, vamos a por el tutorial.

Voy a declarar e iniciar Vue JS:


new Vue({
	el: "#yt",
	data: {
		responsive: 'embed-responsive-item',
		ancho: '100%',
		alto: '400',
		url: 'https://www.youtube.com/embed/',
		video: 'nkA-Tl4zv-E',
		borde: '0',
		pcompleta: null
	},
});

new Vue({

el: "#yt",

data: {

responsive: 'embed-responsive-item',

ancho: '100%',

alto: '400',

url: 'https://www.youtube.com/embed/',

video: 'nkA-Tl4zv-E',

borde: '0',

pcompleta: null

});

También creo una capa con id = yt en donde se va mostrar mi aplicacion Vue JS, asimismo creo el input text en donde pegar el ID del video de Youtube que quiero reproducir:


<div id="yt" align="center">
     <iframe 
	 v-bind:class="responsive" 
	 v-bind:width="ancho" 
	 v-bind:height="alto"
	 v-bind:src="url + video" 
	 v-bind:frameborder="borde"
	 v-bind:allowfullscreen="pcompleta">					    		
     </iframe>
     
     <label for="idvideo"><strong>Copia y Pega el ID del video (Youtube) que quieres ver:</strong></label>

     <input v-model="video" id="idvideo" type="text" placeholder="Ejemplo: nkA-Tl4zv-E" class="form-control input-lg" value="nkA-Tl4zv-E">
     <p style="text-align: center; margin-top: 20px; margin-bottom: 20px;">
	<strong>El ID del video actual es: </strong> {{ video }}
     </p>
</div>

<iframe

v-bind:class="responsive"

v-bind:width="ancho"

v-bind:height="alto"

v-bind:src="url + video"

v-bind:frameborder="borde"

v-bind:allowfullscreen="pcompleta">

</iframe>

<label for="idvideo"><strong>Copia y Pega el ID del video (Youtube) que quieres ver:</strong></label>

<strong>El ID del video actual es: </strong> {{ video }}

</p>

</div>

También pueden ver que las propiedades del iframe las manipulo con la directiva v-bind de Vue JS y le doy los valores en mi array data.

En las propiedades del iframe estoy pasando dos valores en la propiedad v-bind:src=“url + video” estos 2 valores los defino en mi array data:


data: {
   responsive: 'embed-responsive-item',
   ancho: '100%',
   alto: '400',

   // valor de url:
   url: 'https://www.youtube.com/embed/',

   // valor de video:
   video: 'nkA-Tl4zv-E',

   borde: '0',
   pcompleta: null
},

data: {

responsive: 'embed-responsive-item',

ancho: '100%',

alto: '400',

// valor de url:

url: 'https://www.youtube.com/embed/',

// valor de video:

video: 'nkA-Tl4zv-E',

borde: '0',

pcompleta: null

Por ultimo en el input text tambien imprimo un ID de un video de Youtube que se usará como valor por default, para ello uso la directiva v-model :


 <input v-model="video" id="idvideo" type="text" placeholder="Ejemplo: nkA-Tl4zv-E" class="form-control input-lg" value="nkA-Tl4zv-E">

Eso es todo, si tiene dudas les dejo el codigo del repo de Github al inicio del articulo, asimismo un demo para que vean mejor de que trata esta aplicación.

No olvides seguirnos en las redes sociales y suscribirte a nuestro canal de Youtube, eso nos motiva a seguir adelante y compartirte contenido de mucha utilidad en tu aprendizaje.

Tutoriales Vue JS
31-03-2017
12-07-2018
Crear un Post - Eventos Devs - Foro

Youtube APP con Vue JS 2 y Bootstrap

Demo Github

+ Artículos y Tutoriales

Todas Nuestras Páginas y Categorías:

Partners