Do you want to create a responsive YouTube video gallery? You may want to list the YouTube videos together on the website. The usual flow for this is displaying the video thumbnails. And when someone clicks on the thumbnail, the related video should play in the pop-up. From the opened pop-up, users can go to the next and previous videos. This is how video galleries should behave normally.

In this article, I show you how to create a YouTube video gallery using Bootstrap and fancybox.

Why Need of Video Gallery on Website?

A video gallery is used to organize your video collection. By creating a video gallery, your users can view your collection of videos in one place. Apart from it, there may be other reasons to put the gallery on the website. Let’s say you completed a business event or meet-ups and now you want to display all your event videos on the website for the users.

The video gallery is also helpful to increase the views of your YouTube channel.

Having said that, let’s see creating a YouTube video gallery on the website. Our final output will be shown as a screenshot below.

Create YouTube Video Gallery Using Bootstrap and fancybox

I am going to put the basic design for a video gallery. My main intention is to show you how to get YouTube video thumbnails and how to play videos in fancybox. The user should add their own styling to the final output.

Get a Thumbnail of YouTube Video

In order to get started, we need to write a code that returns a thumbnail of the YouTube video. As an example, I am taking a few of my YouTube videos. In the code below I have written a method that extracts the id from YouTube video URLs and returns a thumbnail of YouTube videos.

<?php
$arr_video_ids = array(
    'https://www.youtube.com/watch?v=Pzv_lUp3iOQ',
    'https://www.youtube.com/watch?v=zRtU8dpTEXg',
    'https://www.youtube.com/watch?v=EfSfLyeREMc',
    'https://www.youtube.com/watch?v=C-nypyy4pLg',
    'https://www.youtube.com/watch?v=OJpMT3odXtQ',
    'https://www.youtube.com/watch?v=WBnzOyBVwdg',
);
 
function getYouTubeThumbnailImage($video_id) {
    return "http://i3.ytimg.com/vi/$video_id/hqdefault.jpg";
}
 
function extractVideoID($url){
    $regExp = "/^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/";
    preg_match($regExp, $url, $video);
    return $video[7];
}
?>

The method extractVideoID() will return a video id from the video URL. Using this video id we fetch the video thumbnail with the function getYouTubeThumbnailImage.

Display a Gallery

I will loop through the array of videos, get the thumbnail, and put it on a page. While doing this, I also integrated a fancybox to play the video in Lightbox. The fancybox provided lightbox is touch-enabled, responsive, and fully customizable.

Let’s write an HTML with the help of Bootstrap and fancybox as follows.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<div class="container">
    <h3 class="text-center">My Video Gallery</h3>
    <div class="row">
        <?php foreach ($arr_video_ids as $video) { ?>
            <?php
            $video_id = extractVideoID($video);
            $video_thumbnail = getYouTubeThumbnailImage($video_id);
            ?>
            <div class="col-md-4">
                <div class="pb-2">
                    <a data-fancybox="video-gallery" href="<?php echo $video; ?>">
                        <img src="<?php echo $video_thumbnail; ?>" class="img-thumbnail" />
                    </a>
                </div>
            </div>
        <?php } ?>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

Go to the browser and give it a try. You should be able to see a working YouTube video gallery.

I hope you understand how to create a YouTube video gallery on the website. Please share your thoughts and suggestions in a comment below.

Related Articles

• YouTube API – How to Get List of YouTube Videos of Your Channel
• How to Use YouTube API to Upload Video on YouTube Channel
• How to Upload Video on YouTube in Laravel Application

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.