Galería de Videos con Coda Slider

AVISO

Esta galería de videos ya no funciona, se recomienda buscar otra opción.

La otra vez veíamos cómo poner una galería de imágenes con Coda Slider, y dado a las posibilidades que tiene el script pensé que podríamos hacer una galería de videos con este mismo slider sólo haciendo unas pequeñas modificaciones.

El resultado es una galería de videos con jQuery que permite pasar de un video a otro de forma deslizante haciendo click en las miniaturas que se encuentran debajo. A esta galería podemos añadirle hasta 7 videos con las medidas actuales que posee.

El procedimiento es similar al otro slider, primero descarga este archivo, descomprímelo, sube los archivos a un hosting y luego pega este código antes de </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/>
<script src='URL del archivo jquery-easing-1.3.pack.js'/>
<script src='URL del archivo jquery-easing-compatibility.1.2.pack.js'/>
<script src='URL del archivo coda-slider.1.1.1.pack.js'/>

<script type='text/javascript'>
//<![CDATA[

$(function() {
$("#main-video-slider").codaSlider();
$navthumb = $(".nav-thumb");
$crosslink = $(".cross-link");
$navthumb
.click(function() {
var $this = $(this);
theInterval($this.parent().attr('href').slice(1) - 1);
return false;
});

theInterval();
});
//]]>
</script>

Ahí coloca donde se indica las URLs de los archivos que subiste previamente.
Luego antes de ]]></b:skin> coloca los estilos de la galería:

/* Coda Slider (Video)
----------------------------------------------- */
#page-wrap {
width: 490px; /* Ancho del contenedor general */
min-height: 354px; /* Alto del contenedor general */
margin: 0 auto;
position: relative;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDxGNmLLkBdJe_VEasHxLiU5IN6ndJIHTWmYP6hy0xxyJSlNAJBXTOtJLDCUdhhrM2c_bT7LUOjUvGF1Q4Lw5eqWDd9X4MSfxoK6580h4w-k86GokpSK1-aHAuoFhGU8I0anUioGsmouI/s490/vid-bg.png) top center no-repeat;
}
.slider-wrap {
width: 450px;
position: absolute;
top: 20px;
left: 20px;
}
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer {
position: relative;
overflow: hidden;
width: 450px; /* Ancho del contenedor de los videos */
height: 274px; /* Alto del contenedor de los videos */
margin-bottom:7px;
}
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 450px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px;}
#movers-row { margin: -39px 0 0 62px; }
#movers-row div { width: 16.6%; float: left; }
#movers-row div a.cross-link { float: right; }
.cross-link { display: block; width: 58px; margin-top: -10px; position: relative; padding-top: 3px; z-index: 100; }

El tercer paso es entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript (para la interfaz antigua), o Diseño | Añadir gadget | HTML/Javascript (para la interfaz nueva). Ahí pega este código:

<div id="page-wrap">
<div class="slider-wrap">
<div class="csw" id="main-video-slider">
<div class="panelContainer">

<div class="panel" title="Panel 1">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_UNO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 2">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_DOS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 3">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_TRES" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 4">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CUATRO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 5">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_CINCO" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 6">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SEIS" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="panel" title="Panel 7">
<div class="wrapper">
<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE_SIETE" frameborder="0" allowfullscreen></iframe>

</div></div>

</div></div>
<!-- Estas son las MINIATURAS de los videos -->

<a class='cross-link active-thumb' href='#1'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_UNO/1.jpg" width='58px'/></a>

<div id='movers-row'>

<div><a class='cross-link' href='#2'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_DOS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#3'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_TRES/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#4'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CUATRO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#5'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_CINCO/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#6'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SEIS/1.jpg" width='58px'/></a></div>

<div><a class='cross-link' href='#7'><img class='nav-thumb' height='40px' src="http://img.youtube.com/vi/ID_VIDEO_YOUTUBE_SIETE/1.jpg" width='58px'/></a></div>

</div>
</div></div>

Coloca donde se indica la ID del video de YouTube. La ID del video es toda esa serie de caracteres que aparecen al final de la URL del video, por ejemplo:

Como puedes ver, la ID del video debes colocarla dos veces, una es para el video, y otra para la imagen en miniatura del video.

También puedes poner videos de otros servicios, sólo debes eliminar un código como este:

<iframe width="450" height="274" src="http://www.youtube.com/embed/ID_VIDEO_YOUTUBE" frameborder="0" allowfullscreen></iframe>

Y en su lugar deberás poner el código de tu video, que deberá medir 450px de ancho y 274px de alto. También deberás cambiar la URL de la imagen de la miniatura:

<img class='nav-thumb' height='40px' src="URL de la imagen" width='58px'/>

Es una galería de videos sencilla pero que puede verse muy bien arriba de las entradas del blog, y si la usamos sólo para videos de YouTube entonces será menos complicado.