Display your favorite YouTube videos in a cool looking carousel. It's very easy to customize the gallery by adding a description and video ID. Yes, that simple and it's also responsive.

demo

Let's create an HTML block or simply an HTML page using your favorite portal and add the following:

Code Select Expand

<link rel="stylesheet" type="text/css" href="https://www.idesignsmf.com/Themes/YOUR-THEME/unitegallery/css/unite-gallery.css" />
<link rel="stylesheet" type="text/css" href="https://www.idesignsmf.com/Themes/YOUR-THEME/unitegallery/themes/default/ug-theme-default.css" />


<div id="gallery" style="display:none;">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="T_WSXXPQYeY"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="2Uneti_gkIw"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="A3PDXmYoF5U"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="H_yATzyi-3g"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="T_WSXXPQYeY"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="MnitidPpMgc"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="XZgiNnGB8m4"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="Crw9X_hW-bE"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="T_WSXXPQYeY"
data-description="You can include youtube videos easily!">

<img alt="Youtube Video"
data-type="youtube"
data-videoid="x42AabM8AkI"
data-description="You can include youtube videos easily!">

</div>

<script src="https://www.idesignsmf.com/Themes/YOUR-THEME/unitegallery/js/jquery-11.0.min.js"></script>
<script src="https://www.idesignsmf.com/Themes/YOUR-THEME/scripts/unitegallery.min.js"></script>
<script src="https://www.idesignsmf.com/Themes/YOUR-THEME/unitegallery/themes/default/ug-theme-default.js"></script>

<script>
jQuery(document).ready(function(){
jQuery("#gallery").unitegallery();
});

</script>


Make sure all links (file paths) in this block are correct

2. Next we're going to download the script here http://unitegallery.net/index.php?page=default

3. Unzip it, use your favorite FTP tool (I use FileZilla) to transfer files from my puter to my website folders. Go to the Source folder, click it, look for unitegallery folder. Upload unitegallery folder inside your current theme using FTP.

4. Upload the file called unitegallery.min.js inside your theme's script folder.

5.  Go back to your block or page and populate your own vids and activate. Yes, you can add as many videos as you want.

Happy coding ;)



Reference:
GitHub - vvvmax/unitegallery: Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:

Here's a quick tip,
To adjust width and height simply replace the old script bit in the block code above with this.

Code Select Expand


<script>
                   jQuery(document).ready(function(){
jQuery("#gallery").unitegallery({
gallery_width:1100,
gallery_height:600,
              });
});
</script>