/ JavaScript

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

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más