:: CP - Recursos Web :: - Galeria de video

Galeria de video

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Galeria de video

Fecha: 2016-02-10

Creditos: dynamicdrive.com

Recurso para:

Garantia: SI?

Descripción:

Esta Galería de vídeo permite colocar de una forma muy ordena vídeos de Youtube.com en tu sitio web, es muy fácil de instalar y se adapta a la resolución de la pantalla.

- Codigo 01: Donde quieras que aparesca:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/382e6ic0pfsy8rr/ddvideogallery.js"></script>
<style>
.ddvideoGallery{width: 100%;}
.ddvideoGallery *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.videoWrapper{position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0;}
.videoWrapper iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;}
.videoNav{width: 100%;position: relative;overflow: hidden;background: #eee;}
.videoNav ul{list-style: none;margin: 5px 0;position: relative;width: auto;padding: 0;
overflow: auto;white-space: nowrap;text-align: center;}
.videoNav ul li{display: inline;margin-right: 5px;}
.videoNav ul li img{max-width: 90px;width: 20%;height: auto;position: relative;
border: 4px solid transparent;cursor: pointer;transition: all .5s;}
.videoNav ul li img:hover, .videoNav ul li img.selected{border: 4px solid #47d2e9;}
</style>

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo

)

CLICK AQUI PARA DESCARGAR

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Para que este recurso funcione debes buscar el "ID" del vídeo y colocarlo donde dice "IDVIDEO" en el código, el ID del vídeo es lo que te mostramos a continuación: