How to Create a Simple Video Gallery

Depending on the purpose of your website, you may find the need to have a video gallery. There are a ton of video gallery libraries and plugins out there for you to choose from. Some are very easy to implement and use, and others require a little more coding knowledge. However, a video gallery doesn’t have to be overly complicated and, in actuality, only requires a minimal amount of code to get working.

Building the Video Gallery

For this gallery, we are going to create several elements. First, we need to have a list of thumbnails that will act as links to the videos we want to display (for this example, we will be using YouTube videos). Second, we will need an overlay to pop up when a thumbnail is clicked on. Since we discussed how to build an overlay in a previous post, we won’t cover that portion in this post. Lastly, we will need to write a script that will display the correct video in the overlay.

As of this posting (because things always change), YouTube uses iframes for it’s embedded videos. This isn’t necessarily an issue, but if your gallery is large enough, this could potentially hamper the load time of the page. We don’t want that, we want the page to load as quickly as possible. To circumvent this, we will code our gallery in such a way that a video will only exist when a visitor decides to view it. The way we will accomplish this is by grabbing the YouTube video id associated with the videos we’d like to include. If you are not sure how to find the video id, take a look at this video.

So, let’s begin. First, let’s create our links and wrap them in a <div> called videos

<div id="videos">
   <a data="uT6YOI6JcRs"></a>
   <a data="ktAT6JCWCr0"></a>
   <a data="d0K436vUM4w"></a>
   <a data="PhbWIFDqQfk"></a>
</div>

<div id="overlay">
   <div class="modal">
      <div id="close">X</div>
      <div id="loader"></div>
   </div>
</div>

You’ll notice that we’ve added the video id as a data attribute to our <a> tags. This will be used later when we write our jQuery script.

Believe it or not, that’s actually all the HTML we need for our gallery. Everything else will be handled by our jQuery script. You may be thinking, where do the images for our thumbnails come from? Luckily for us, YouTube actually creates thumbnails of different sizes from the videos when they are uploaded. If we have the video id (which we obviously do), we can grab these thumbnails and use them in our gallery. You can, of course, use your own images if you’d like, and you would simply include them inside your <a> tags, but for this example, we will use YouTube images.

Styling our Video Gallery

Now we’ll add some CSS to make everything look nice. Here’s some basic CSS to have a 4 column gallery:

#videos a {
   display: block;
   width: 25%;
   margin-bottom: 20px;
   box-sizing: border-box;
   padding: 0 10px;
   float: left;
   cursor: pointer;
   text-decoration: none;
   outline: 0;
}

#videos a:hover {
   opacity: 0.7;
}

#videos a img {
   width: 100%;
   height: auto;
}

#overlay {
   background: rgba(0,0,0,0.8);
   position:fixed;
   top: 0;
   right: 0;
   left:0;
   bottom: 0;
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: none;
}

#overlay .modal {
   background: #fff;
   border-radius: 5px;
   width: 90%;
   margin: 100px auto;
   max-width: 800px;
   min-height: 100px;
   position: relative;
   padding: 30px 20px 15px;
}

#overlay .modal #close {
   position: absolute;
   top: 5px;
   right: 5px;
   cursor: pointer;
}

#overlay iframe {
   width: 100%;
}

Let’s Make Our Video Gallery Work

It may seem as though we have a lot of things we need our jQuery script to handle. We need it to bring in our thumbnails, handle the overlay, and display the correct YouTube video. Despite the fact that we have a lot of functionality going on here, the code for this is not that complicated. Here is what our script will look like:

$(document).ready(function() {
   $('#videos a').each(function() {
      var data = $(this).attr('data');
      $(this).append('<img src="http://img.youtube.com/vi/'+data+'/maxresdefault.jpg" />');
   });

   $('#videos a').click(function() {
      var data = $(this).attr('data');
      $('#loader').append('<iframe src="https://www.youtube.com/embed/'+data+'" frameborder="0" allowfullscreen></iframe>');
      $('#overlay').fadeIn(250);
   });

   $('#close').click(function() {
      $('#overlay').fadeOut(250,function() {
         $('#loader').html('');
      });
   });
});

See? Short and sweet. Let’s talk a little bit about what we are doing here. In the first function, we are looping through all <a> tags inside our videos <div> and we are appending the YouTube thumbnails to them.

In the second function, when an <a> tag is clicked, we are checking for the value of its data attribute. Then, we append an iframe to our overlay and insert the value of the data attribute into it. This allows us to use one iframe for every item in our video gallery and simply swap out the video id to play the correct video.

In the last function, we are simply closing the overlay and clearing out the iframe that was inside of it. If we didn’t do this, we would see two iframes instead of one when we click to view another video (and we certainly don’t want that).

That’s it! We now have a working video gallery. Of course, the above code can be tweaked for individual needs and the gallery can be styled however you’d like.