Videos de YouTube en popup

Os habreis fijado que a veces cuando queremos poner varios videos en nuestro blog, esto hace que tarde mucho en cargar la pagina, esto es debido a la acumulacion de flash y/o iframes que contienen. Pues bien, ahora con este codigo jQuery combinado con CSS3 que os proporciono, podreis poner la cantidad de videos que querais en muy poco espacio sin notar ralentizacion alguna. Esto se debe a que solo mostraremos imagenes, y al hacer click en ellas apareceran los videos en una ventana emergente o 'popup', de esa manera no los alojaremos directamente y eliminaremos la pesada carga, a la vez que le damos un efecto visual interesante a los mismos. Como he indicado en el titulo, este codigo esta indicado para videos de YouTube, aunque tambien podemos ponerlos de Vimeo.

Aqui teneis el resultado final, haced click en las imagenes y os apareceran los videos.

Si quieres ponerlo en tu blog o web, copia el siguiente codigo y añadelo en la plantilla antes de </head> y guarda los cambios.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('.youtube').each(function() {
$(this).append("<div></div>");
$(this).click(function() {
   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
       window.location.href= $(this).attr('href');
    }
   else if(this.href.indexOf('vimeo') != -1) {
       var innerU = $(this).attr('href').replace('vimeo.com/','player.vimeo.com/video/');
       $('body').append("<div class='youtube-back'><iframe width='560' height='315' src='" + innerU + "?autoplay=1' frameborder='0' allowfullscreen></iframe></div>");
       $('body').append("<div id='youtube-overlay'></div>");

       $("#youtube-overlay").click(function(){
          $("#youtube-overlay").remove();
          $(".youtube-back").remove();
       });
       return false;
   }
   else {
       var innerU = $(this).attr('href').replace('watch?v=','embed/');
       $('body').append("<div class='youtube-back'><iframe width='560' height='315' src='" + innerU + "?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe></div>");
       $('body').append("<div id='youtube-overlay'></div>");

       $("#youtube-overlay").click(function(){
          $("#youtube-overlay").remove();
          $(".youtube-back").remove();
       });
       return false;
   };
});
});
</script>

<style>
.youtube img {
background:white;
padding:5px;
border:1px solid #bbb;
box-shadow: 0 1px 2px rgba(0,0,0,0.09);
position:relative;
margin:5px;
vertical-align:top;
}
.youtube {
display:inline-block;
position:relative;
}
.youtube div:before {
content:'';
display:block;
width:48px;
height:48px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgHVhROUvCmaxERzDM_DjhB6I0WQIV6u66Gq3SvVR-ZaUUflP8u-uXGjguA-YGZwyiNpL0QB9twD-2Get7lyS_cHAY0-rh2lUH4fhaF4EVDxqSRmVe4toR9G8icQoYaar4yBp9GYR6LLY/s1600/youtubePlay.png) 0 0 no-repeat;
position:absolute;
top:50%;
margin-top:-24px;
left:50%;
margin-left:-24px;
opacity:.7;
zoom:.9;
}
.youtube:hover div:before {opacity:1;}
.no-play div:before {display:none;}
.youtube-back {
width:560px;
height:315px;
padding:2px;
border-radius:2px;
background:white;
border:1px solid #bbb;
position:fixed;
top:50%;
margin-top:-158px;
left:50%;
margin-left:-280px;
z-index:999;
box-shadow:0 1px 7px rgba(0,0,0,0.3);
animation:slideIn 0.2s;
-webkit-animation:slideIn 0.2s;
-moz-animation:slideIn 0.2s;
}
#youtube-overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
cursor:pointer;
z-index:998;
background:rgba(0,0,0,0.4);
animation:fadeIn 0.2s;
-webkit-animation:fadeIn 0.2s;
-moz-animation:fadeIn 0.2s;
}
@keyframes fadeIn
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn
{
0%   {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn
{
0%   {opacity:0;}
100% {opacity:1;}
}
@keyframes slideIn
{
0%   {opacity:0;margin-top:-128px;}
100% {opacity:1;margin-top:-158px;}
}
@-webkit-keyframes slideIn
{
0%   {opacity:0;margin-top:-128px;}
100% {opacity:1;margin-top:-158px;}
}
@-moz-keyframes slideIn
{
0%   {opacity:0;margin-top:-128px;}
100% {opacity:1;margin-top:-158px;}
}
@-o-keyframes slideIn
{
0%   {opacity:0;margin-top:-128px;}
100% {opacity:1;margin-top:-158px;}
}
</style>

Ahora, cada vez que quieras poner una imagen con el video emergente, pega estas lineas de codigo, añadiendo la direccion url del video (en color rojo) y la de la imagen (en azul).

ver codigo