Simple Responsive Video Gallery

With a simple CSS grid and the jQuery app “Fancybox”, it’s easy to make a responsive video gallery with videos from YouTube and Vimeo.

The Video Gallery

Kumru Ballad

Kumru Orchestral

Mesopotamia

Kreutzer

Bodrum

Mesopotamia

Symhpony in Red

Paganini Jazz

Say Plays Say

Say in Switzerland

Serenad Bağcan

Mozart Maratonu

First write the HTML

  <article class="video">
    <figure>
      <a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/paG__3FBLzI">
      <img class="videoThumb" src="http://i1.ytimg.com/vi/paG__3FBLzI/mqdefault.jpg"></a>
    </figure>
    <h2 class="videoTitle">Mesopotamia</h2>
  </article>
  1. Use two classes: fancybox and fancybox.iframe on the a tag.
  2. Use the URL in the iframe embed code, not the copy & paste URL.
  3. Right click on the YouTube or Vimeo video thumbnail and copy the image URL for the source.
  4. Use your own class names for the article, img src, and video title.

Next write the CSS

First the vanilla CSS:

  /* First make sure the video thumbnail images are responsive. */
    img {
      max-width: 100%;
      height: auto;
    }

  /* 
  This is the starting grid for each video with thumbnails 5 across for the largest screen size.
  It's important to use percentages or there may be gaps on the right side of the page. 
  */
  .video {
    background: #fff;
    padding-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    width: 18%; /* Thumbnails 5 across */
    margin: 1%;
    float: left;
  }

   /* These keep the height of each video consistent between YouTube and Vimeo.
   Each can have thumbnail sizes that vary by 1px and are likely break your layout. */
  .video figure {
    height: 0;
    padding-bottom: 60%;

  /* Media Queries - This is the responsive grid. */
  @media (max-width: 1366px) {
    .video {
      width: 23%; /* Thumbnails 4 across */
    }
  }
  @media (max-width: 1024px) {
    .video {
      width: 31.333%; /* Thumbnails 3 across */
    }
  }
  @media (max-width: 600px) {
    .video {
      width: 48%; /* Thumbnails 2 across */
    }
  }
  @media (max-width: 360px) {
    .video {
      display: block;
      width: 96%; /* Single column view. */
      margin: 2%; /* The smaller the screen, the smaller the percentage actually is. */
      float: none;
    }
  }

  /* These are my preferred rollover styles. */
  .video img {
    width: 100%;
    opacity: 1;
  }
  .video img:hover, .video img:active, .video img:focus {
    opacity: 0.75;
  }
  1. The media query breakpoints are videos 5 across for screen sizes greater than 1366px, 4 across for sizes greater than 1024px, 3 across for sizes greater than 600px, and 2 across for sizes greater than 360px. At 360px the videos are no longer floated, but rather display:block in a single column.
  2. Keeping the widths and margins fluid with percentages is important for this gallery’s responsive layout. If you use px, em, or rem, you’re likely to have large gaps on the right side of the page.
  3. It’s important to stretch the thumbnail image with width:100% on screen sizes that exceed the natural size of the image. When the screen size is smaller, the width of the article is smaller than the images's natural size, and max-width:100% takes over so the images are responsive.
  4. Styling the video titles is the most important aspect of this layout. If the titles are on top of, or below, the video, and are not consistent across each video, each article height will be different and break the layout.

Use as a mixin in Sass

  @mixin grid {
    width: 18%;
    margin: 1%;
    float: left;
    @media (max-width: 1366px) {
      width: 23%;
    }
    @media (max-width: 1024px) {
      width: 31.333%;
    }
    @media (max-width: 600px) {
      width: 48%;
    }
    @media (max-width: 360px) {
      display: block;
      width: 96%;
      margin: 2%;
      float: none;
    }
  }
  @mixin hover {
    opacity: 1;
    &:hover, &:active, &:focus {
      opacity: 0.75;
    }
  }

Then include it in your video style:

  .video {
    background: #fff;
    padding-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.15);
    @include grid;
    figure {
      height: 0;
      padding-bottom: 60%;
    }
    img {
      width: 100%;
      @include hover;
    }
  }

Using Fancybox

Fancybox comes with a style sheet you can copy and paste into your CSS. But if you’re using Sass, you should create a partial file and @import it into your global or main style sheet. I generally don't make any changes to these styles.

Calling and writing the scripts:

  // These should go in the footer.
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>

  // If you don't use a global js sheet, these can also go in the footer.
  <script>
    $(document).ready(function() {
      $('.fancybox').fancybox({
        padding   : 0,
        maxWidth  : '100%',
        maxHeight : '100%',
        width   : 560,
        height    : 315,
        autoSize  : true,
        closeClick  : true,
        openEffect  : 'elastic',
        closeEffect : 'elastic'
      });
    });
  </script>
  1. First call the jQuery library from the Google API.
  2. Then link to the Fancybox script which should be in a folder. All the better if it's minified.
  3. There's a lot of documentation on how to use Fancybox. You can check the docs on GitHub, on fancybox.net, and on fancyapps.com.