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
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.
- Easy and simple to use – plug it in and go
- Fast file transfers with SuperSpeed USB 3.0
- Compatible with USB 3.0 and USB 2.0
- Powered by USB port
- Drag and drop file saving for Windows, right out of the box.
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:
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:
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 it’s
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. You can check it out on JSFiddle here. Of course, the above code can be tweaked for individual needs and the gallery can be styled however you’d like. You can download the code for this post at GitLab or GitHub. You can clone the repo, or simply download the ZIP file. The code there includes adding social share buttons to the videos as well.
Was this article helpful? Have any suggestions on how to improve? Feel free to leave a comment below!