Mostrar video aleatorio con JS

Si en algún momento nos encontramos con la necesidad de mostrar diferentes vídeos de forma aleatoria (mostrar uno u otro según se recargue la página), lo único que necesitamos son un par de líneas de Javascript/jQuery y los enlaces correctos de los vídeos de YouTube y/o de Vimeo.

¿Cómo mostrar vídeos de YouTube aleatoriamente?

En este caso, aplicaré el código en un DIV. Recomiendo hacerlo en un contenedor (DIV) especialmente creado para almacenar este código.

Lo primero, es localizar los enlaces. La manera correcta de agregarlos es; ir al video, buscar la “pestaña” llamada Compartir, hacer click, e ir a Insertar. Entonces, copiamos el enlace que hay en el src.

Una vez tengamos todos los enlaces de todos los vídeos que queramos mostrar pegados en un bloc de notas (o donde sea), debemos abrir nuestro editor de texto y, después de adjuntar jQuery (en mi caso jQuery v1.9.1), en un archivo Javascript (por ejemplo, “random.js“) creamos una variable llamada, por ejemplo, videos (sin tilde), y le damos un valor de un array con los enlaces de YouTube.

var videos = ['ENLACE 1', 'ENLACE 2', 'ENLACE 3', 'ENLACE 4'];

Obviamente debes reemplazar “ENLACE X” por cada uno de tus enlaces, ya sean dos, cuatro o veinte.

Una vez hecho eso, debemos crear un DIV contenedor donde se situarán los vídeos (uno a la vez). Los vídeos del array de la variable videos se mostrarán en ese DIV por medio de propiedad HTML de jQuery (.html). En mi caso, llamaré al contenedor por la ID “video” ( $(“#video”) ). Entonces, ese DIV mostrará de manera aleatoria (gracias al Math.random() de Javascript) cualquiera de los vídeos porque añadirá los enlaces del array videos a el HTML del DIV con el ID “video”.

Tienes el ejemplo completo en este JSFiddle, puesto que WordPress no me permitía pegar el código. Recarga la página para que aparezca uno de los cuatro vídeos.

¿Cómo mostrar vídeos de Vimeo aleatoriamente?

Con el mismo procedimiento anterior, pero variando el iframe (usando el que nos proporciona Vimeo), conseguimos el mismo resultado.

Una vez tengamos copiado el código para incrustar, lo pegamos en algún editor de texto y copiamos el src (con los dos ‘slash‘ que tiene al principio).

Aquí tienes un JSFiddle con el método para Vimeo, para hacerlo más simple.

Conclusión:

Como siempre, una manera sencilla y eficaz de mostrar aleatoriamente vídeos en nuestra web.

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s