jueves, 19 de enero de 2012

Lightbox para youtube

Estuve retocando un lightbox de 4 líneas que encontré por la red y me ha quedado más especializado y con unas cuantas líneas más, pero responde a las necesidades concretas que tenía en un entorno algo correoso. Aunque creo que fácilmente se puede aprovechar (y mejorar).

La mayor gracia que tiene es al querer tener una página con varios vídeos de youtube (de momento todos deberían tener el mismo tamaño) pero sólo verlos en un lightbox al hacer clic encima del nombre del enlace.


<script type="text/javascript">
function lightbox_up(current_tag)
{
 var parent = current_tag.parentNode;

 document.getElementById('fade').style.display='block';

 var capa=document.createElement('div');
 capa.setAttribute("style","z-index: 1002; border-bottom: #0099cc 16px solid; position: fixed; border-left: #0099cc 16px solid; padding-bottom: 16px; background-color: white; padding-left: 16px; padding-right: 16px; overflow: auto; border-top: #0099cc 16px solid; top: 25%; border-right: #0099cc 16px solid; padding-top: 16px; left: 25%");
 capa.id = "lightbox";
 
 parent.appendChild(capa);
 
 var iframe=document.createElement('iframe');
 iframe.setAttribute("height","315");
 iframe.setAttribute("src",current_tag.title + '&modestbranding=1&autoplay=1');
 iframe.setAttribute("frameborder","0");
 iframe.setAttribute("width","560");
 iframe.setAttribute("allowfullscreen","");

 capa.appendChild(iframe);
 
 var btn_cerrar=document.createElement('a');
 btn_cerrar.setAttribute("href","javascript:void(0)");
 btn_cerrar.setAttribute("style","display: block");
 btn_cerrar.setAttribute("onclick","lightbox_down(this.parentNode.id)");
 btn_cerrar.appendChild(document.createTextNode("Cerrar"));

 capa.appendChild(btn_cerrar);
}

function lightbox_down(id)
{
 document.getElementById('fade').style.display='none';
 var x=document.getElementById(id);
 x.parentNode.removeChild(x); 
}
</script>

<b>Vídeos:</b>

<ul>
<li><a href="javascript:void(0)" onclick="lightbox_up(this)" title="https://www.youtube.com/embed/qDsjsnfIBH8?rel=0">Vídeo 1</a></li>
<li><a href="javascript:void(0)" onclick="lightbox_up(this)" title="https://www.youtube.com/embed/EehdIcypknY?rel=0">Vídeo 2</a></li>
</ul>

<div class="black_overlay" id="fade" style="-moz-opacity: 0.8; background-color: black; display: none; filter: alpha(opacity=80); height: 100%; left: 0%; opacity: .80; position: fixed; top: 0%; width: 100%; z-index: 1001;">
</div>