Muchos vídeos, poco peso. Cargador a demanda | Oloblogger Ahora que la rapidez de carga de una página está de moda -o mejor dicho, es casi una necesidad- hay ...

21 de marzo de 2015

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...

Cargador de vídeos


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.




/* 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
Copy URL

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

follow us in feedly

14 comentarios :

  1. Respuestas
    1. yo lo hice tambien pero con el código sin estilo,el tuyo esta mejorado.
      aca un ejemplo:
      http://modelos-motos.blogspot.com/p/videos.html
      dame tu opinión maestro.

      Eliminar
    2. Hay muchos caminos para llegar a Roma, Karlosnum. Ese es otro más :)

      Eliminar
  2. Gracias por esto, me viene genial para una idea de proyecto, saludos Oloman!

    ResponderEliminar
  3. Hola Oloman, perdona que deje este comentario en la entrada, pero hace unos días te mande a través del Formulario de Contacto una consulta acerca de implementar unos cambios en mi blog y me gustaría saber si habías recibido el mensaje.
    Muchas gracias por todo.

    ResponderEliminar
    Respuestas
    1. Pues estoy prácticamente parado con peticiones-consultas-pedidos, pero la verdad es que tampoco recuerdo haber recibido nada con tu nick.

      Eliminar
    2. bueno muchas gracias, no sabía que ahora no atendías peticiones ni pedidos. Un saludo

      Eliminar
    3. No dije eso, sino que estoy prácticamente parado. Y es así porque no dispongo casi de tiempo. Hago cosillas, pero muy despacio.
      La segunda parte de mi contestación -que ahora confirmo- es que no he recibido nada con tu remite

      Eliminar
  4. Sencillamente espectacular.

    ResponderEliminar
  5. Hace poco que estoy en la cruzada de experimentar cambiar mi blog personal, quisiera incorporar vídeos, como bien se explican acá, ahora quisiera saber si los link de los mismos se ponen en la parte de la letra clara en los códigos q proporcionas?. Disculpa la ignorancia ja.

    ResponderEliminar
    Respuestas
    1. Bueno, en la clara exactamente no. Sería dónde yo usé el color verde.
      De todas formas si vas leyendo detenidamente el texto de esta entrada, ahí se explica qué tienes que poner.

      Eliminar
  6. Hola oloman una consulta ya que no logro que funcione en las entradas, si que funciona en las paginas estaticas. alguna solucion http://monstruitoslugo.blogspot.com.es/

    Gracias un saludo como siempre "The Best"

    ResponderEliminar
    Respuestas
    1. ¿Una dirección dónde lo tengas que lo vea, Monstruitos?

      Eliminar