Mostrar Vídeos Responsive con FitVids.js

Para poder mostrar vídeos que se adapten de manera fluida o responsive en nuestro sitio web vamos a utilizar la librería FitVids.js, hasta el momento soporta los vídeos alojados en estos sitios web YouTube, Vimeo, Blip.tv, Viddler, Kickstarter.

Realizar esta tarea con solo CSS puede resultar un poco tediosa pero gracias a la librería FitVids.js esta tarea se torna placentera.

Sitio Oficial

fitvidsjs.com

Este es el sitio web oficial, aquí podrás encontrar la documentación completa de esta librería.

Implementación

Para poder mostrar vídeos responsive con FitVids.js tendremos que realizar lo siguiente.

  • Descargar la librería FitVids.js.
  • Agregar jQuery te recomiendo usar el CDN de Google.

Código HTML

Aquí tienes el código completo 😃.

<!DOCTYPE html>  
<html lang="es">  
<head>  
 <meta charset="UTF-8">
 <title>FitVids.js | Mostrar Vídeos Responsive con FitVids.js</title>
 <style>
  header, .contenido, footer{
   margin: 0 auto;
   width: 65%;
  }
  .fluid-width-video-wrapper{
   margin-bottom: 30px;
  }
  footer{
   text-align: center;
  }
 </style>
</head>  
<body>  
 <header>
  <h1>Mostrar Vídeos Responsive con FitVids.js</h1>
 </header>
 <!-- Contenedor principal donde se mostraran los vídeos -->
 <section class="contenido">
  <!-- iframe copiado desde YouTube -->
  <iframe width="560" height="315" src="https://www.youtube.com/embed/HFXXcRZvQNc" frameborder="0" allowfullscreen></iframe>
 </section>
 <footer>
  <b><a href="https://01luisrene.com">01luisrene</a> &copy; 2017</b>
 </footer>
 <!-- jQuery -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <!-- Asegurate de descargar la librería `FitVids.js` y apuntar hacia la librería desde la etiqueta `script` -->
 <script src="js/jquery.fitvids.js"></script>
 <script>
 //Función principal que almacena todas las sub funciones que se ejecutaran cuando cargue la página.
  $(document).ready(function(){
   // Agregue la función `FitVids()` al contenedor donde se mostrara el vídeo cualquiera sea el nombre por ejemplo .contenido, .container, .wrapper, .post, etc.
   $(".contenido").fitVids();
  });
 </script>
</body>  
</html>  

La librería FitVids.js crea un contenedor para el iframe con una clase nombrada .fluid-width-video-wrapper, el cual puedes utilizar en CSS para dar los margenes por ejemplo.


Obtener el iframe de YouTube

Para obtener el iframe apuntando al vídeo de YouTube realizamos lo siguiente.

Compartir Vídeos YouTube


Ver Código en GitHub

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión