Contenedor de vídeos

el_tigre · #1 (**permalink**) 01/09/2012, 12:09

Hola foreros, alguien podría ayudarme cómo hacer este contenedor de Vídeos...ver aquí

He intentado copiar la parte del código de los vídeos + el CSS y el JS y no me funciona....

Saludos

flashmax · #2 (**permalink**) 01/09/2012, 13:38

Te paso la base del código luego tendrás que editar el css y bajar los js

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" lang="en" xml:lang="en">
  <head>
    <link rel="stylesheet" type="text/css" media="screen" href="http://www.palabraviva.org.mx/css/style.css" />
    <script type="text/javascript" src="http://www.palabraviva.org.mx/js/jquery-1.4.2.pack.js"></script>
    <script type="text/javascript" src="http://www.palabraviva.org.mx/js/plugins.js"></script>
    <script type="text/javascript" src="http://www.palabraviva.org.mx/js/scripts.js"></script>

  </head>
  <body>
    <div id="content"><div class="wrap">

<!-- VIDEOS -->
<script type="text/javascript" src="http://www.palabraviva.org.mx/js/videos.js"></script>
<div id="slidervideo">
  <div id="slidervideo-content"></div>
  <ul id="slidervideo-tabs">
    <li><a href="#vid1"><img src="http://i2.ytimg.com/vi/SLMgKWcDmP8/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Simulacion (parte 1)</span><span class="vidDesc">Sabado 18 de Agosto de 2012</span></a></li><li><a href="#vid2"><img src="http://i2.ytimg.com/vi/_AGRtN5vHII/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Simulacion (parte 2)</span><span class="vidDesc">Sabado 18 de Agosto de 2012</span></a></li><li><a href="#vid3"><img src="http://i2.ytimg.com/vi/yNCE6fjGIis/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Simulacion (parte 3)</span><span class="vidDesc">Sabado 18 de Agosto de 2012</span></a></li><li><a href="#vid4"><img src="http://i2.ytimg.com/vi/WbjmZHYcGEE/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Simulacion (parte 4)</span><span class="vidDesc">Sabado 18 de Agosto de 2012</span></a></li><li><a href="#vid5"><img src="http://i2.ytimg.com/vi/9FfnOVsTwRo/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Los primeros dias (parte 2)</span><span class="vidDesc">Domingo 29 de Julio de 2012</span></a></li><li><a href="#vid6"><img src="http://i2.ytimg.com/vi/jfQu4cs9NyU/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Los primeros dias (parte 3)</span><span class="vidDesc">Domingo 29 de Julio de 2012</span></a></li><li><a href="#vid7"><img src="http://i2.ytimg.com/vi/MptXkYwE3z8/default.jpg" alt="" class="thumb-vid" /><span class="vidTit">Los primeros dias (parte 4)</span><span class="vidDesc">Domingo 29 de Julio de 2012</span></a></li>
  </ul>
</div>
<!-- end:VIDEOS -->
  </div>
 </body>
</html>

el_tigre · #3 (**permalink**) 01/09/2012, 14:37

Si, amigo, esa parte ya lo tengo, lo que no logro es mostrar el vídeo en el contenedor, no sé como está programado eso.....creo que es Ajax con Query......pero no logro ver nada de programación.....sólo veo un código "#vid1" ......tienes alguna idea ...donde programa eso ¿?

flashmax · #4 (**permalink**) 01/09/2012, 15:12

Cita:

Iniciado por el_tigre

Si, amigo, esa parte ya lo tengo, lo que no logro es mostrar el vídeo en el contenedor, no sé como está programado eso.....creo que es Ajax con Query......pero no logro ver nada de programación.....sólo veo un código "#vid1" ......tienes alguna idea ...donde programa eso ¿?

estas aquí: <script type="text/javascript" src="js/videos.js"></script>

videos.js

Código:

//lista de videos
var video = [];
video[1] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/SLMgKWcDmP8" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/_AGRtN5vHII" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/yNCE6fjGIis" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/WbjmZHYcGEE" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/9FfnOVsTwRo" frameborder="0" allowfullscreen></iframe>';
video[6] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/jfQu4cs9NyU" frameborder="0" allowfullscreen></iframe>';
video[7] = '<iframe width="620" height="330" src="http://www.youtube.com/embed/MptXkYwE3z8" frameborder="0" allowfullscreen></iframe>';

el_tigre · #5 (**permalink**) 01/09/2012, 15:38

Muchas gracias, ya lo tengo con mis vídeos, pero no puedo mostrarlos.......¿alguna ayuda maestro?