Muchos vídeos, poco peso. Cargador a demanda

Ahora que la rapidez de carga de una página está de moda -o mejor dicho, es casi una necesidad- hay que pensárselo dos veces antes de poner varios vídeos en una misma página.

Sin embargo a veces necesitamos hacerlo, así que ¿qué tal si los tenemos todos a la vista pero sólo cargamos uno de inicio? Imagino que algo ganaremos.

Pues esa es más o menos la principal utilidad del cacharrito que veremos hoy. La otra será no llenar toda la página de vídeos y como complemento también le daremos un toque personal al conjunto.

La idea básica es usar una simple línea JavaScript que irá sustituyendo a demanda (con un clic en una miniatura) un vídeo por otro, cargando el que se desea ver y sólo ese. Para ello usaremos un HTML concreto y con algo de CSS haremos el resto. En fin, allá vamos con este...

En primer lugar tendremos que utilizar la siguiente estructura HTML, que se podrá poner indistintamente en una entrada, en una página o en un gadget. En ella lo único que hay que cambiar es lo marcado con un color distinto y que es el código de cada vídeo.

Ese código hay que repetirlo dos veces en cada enlace de los del principio. Uno será para pasar esa id del vídeo a la rutina JavaScript que lo cargará y la otra para que se muestre la correspondiente miniatura.

El del primer vídeo hay que repetirlo más adelante una tercera vez. Eso es para que salga de inicio. Será el único que realmente cargaremos de primeras.

La identificación de cada vídeo la podéis encontrar en YouTube en la propia dirección URL. Sería en este ejemplo ese alfanumérico de 11 caracteres que hay al final, tras el símbolo igual (=): https://www.youtube.com/watch?v=jCOUeqgYoLM.

Opcional: Incluir el título del vídeo con un div dentro del enlace.

<div class="yt-general">
 <div class="yt-miniaturas">
  <!-- INCLUIR LA ID DE CADA VIDEO 2 VECES EN CADA ENLACE: UNO PARA ORDENAR LA CARGA Y OTRO PARA LA MINIATURA -->
  <a href="javascript:cargarVideo('id-frame','RnoDb0bMQuk');"><img src="http://img.youtube.com/vi/RnoDb0bMQuk/1.jpg" /><div>1956 - That's amore</div></a>
  <a href="javascript:cargarVideo('id-frame','7IjgZGhHrYY');"><img src="http://img.youtube.com/vi/7IjgZGhHrYY/1.jpg" /><div>1957 - Great balls of fire</div></a>
  <a href="javascript:cargarVideo('id-frame','noE1u3Xu6Vg');"><img src="http://img.youtube.com/vi/noE1u3Xu6Vg/1.jpg" /><div>1956 - Don't be cruel</div></a>
  <a href="javascript:cargarVideo('id-frame','ty31QY5ZGHo');"><img src="http://img.youtube.com/vi/ty31QY5ZGHo/1.jpg" /><div>1957 - Everyday</div></a>
  <a href="javascript:cargarVideo('id-frame','u0yGXKoA6Ek');"><img src="http://img.youtube.com/vi/u0yGXKoA6Ek/1.jpg" /><div>1958 - Johnny .Goode</div></a>
 </div>
 <div class="yt-cargador">
  <div id="yt-video" class="yt-video">
   <!-- ESCRIBIR DE NUEVO EL CÓDIGO DEL PRIMER VIDEO -->
   <iframe id="id-frame" width="420" height="315" src="https://www.youtube.com/embed/RnoDb0bMQuk?rel=0" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
</div>
<script>function cargarVideo(idframe, idvideo) {document.getElementById(idframe).src = 'https://www.youtube.com/embed/' + idvideo + '?rel=0';}</script>

Aquí, justo arriba, al final del HTML, he añadido directamente el JavaScript. Como es muy corto ni merece la pena meterlo en la plantilla, pero también se podría incluir si se quiere antes del </head>. De esa manera ya no habría que incluirlo cada vez que usemos este sistema en una entrada/página.

Habréis visto que es una tontería, pero funciona estupendamente. Cuando se pincha en la miniatura, se manda a la función cargarVideo una id HTML que se corresponde con la del iframe del primer vídeo (id-frame) y la id del vídeo a cargar (RnoDb0bMQuk... o la que corresponda). Luego la función sustituye ese último código y listo, ya tenemos otro vídeo en lugar del primero.

---

Y como HTML sin CSS casi que no es nada, sólo nos faltará añadir en nuestra plantilla lo que va después de esta demo para que todo se quede más mono. Pinchad en las miniaturas para comprobar como se produce la sustitución.

1956 - That's amore

1957 - Great balls of fire

1956 - Don't be cruel

1957 - Everyday

1958 - Johnny B.Goode

/* Estilo cargador de vídeos */
.yt-general {padding: 10px;box-sizing: border-box;text-align: center;line-height: 0;font-size: 0;}
.yt-cargador {width: 1000px;max-width: 100%;margin: 0 auto;padding: 4%;background: #333;border-radius: 0 0 8px 8px;box-sizing: border-box;box-shadow: 0 0 10px #000 inset, 0px 0 25px #666 inset;}
.yt-video{position: relative;max-width: 100%;padding-bottom: 56.25%;height: 0;overflow: hidden;background: #000;}
.yt-video iframe,.yt-video object,.yt-video embed {width: 1600px;max-width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
.yt-miniaturas {width: 1000px;max-width: 100%;margin: 0 auto;padding: 1% 4% 2%;background: #333;box-sizing: border-box;border-radius: 8px 8px 0 0;box-shadow: 0 0 10px #000 inset, 0px 0 25px #666 inset;}
.yt-miniaturas a {position: relative;display: inline-block;width: 20%;height: 0;overflow: hidden;padding: 0 0 13% 0;vertical-align:top;margin: 1% 0 0;border: 2px solid #333;box-sizing: border-box;transition: .3s all;}
.yt-miniaturas a:hover {z-index: 2;transform: scale(1.2);}
.yt-miniaturas a img {width: 100%;padding: 0;background: transparent;}
.yt-miniaturas a div {position: absolute;width: 100%;overflow: hidden;padding: 0 4px;box-sizing: border-box;white-space: nowrap;text-overflow: ellipsis;bottom: 0;left: 0;font-size: 14px;line-height: 18px;font-family: Arial;color: white;background: #CC181E;opacity: .8;}
@media (max-width:470px) {.videominiaturas a div {display: none !important;}}

/* Símbolo cargador CSS - OPCIONAL */
.yt-video:before {content: "";display: inline-block;margin: 20% auto;border-width: 30px;border-radius: 50%;-webkit-animation: spin 1s linear infinite;-moz-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-style: double;border-color: #999 transparent;}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(359deg);}}
@-moz-keyframes spin {100% {-moz-transform: rotate(359deg);}}
@keyframes spin {100% {transform: rotate(359deg);}}

Y casi se me olvida. Con ese CSS el cargador será adaptable para cualquier ancho de pantalla.

Para practicar, modificar o mejorar, en este Codepen lo tenéis todo montado.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter