YouTube Video Carousel

Started by Mick, Dec 24, 2019

Dec 24, 2019 Last Edit: May 25, 2020 by Mick
"YouTube Video Carousel"
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.




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


<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:
Dec 25, 2019 #1 Last Edit: Dec 26, 2019 by Mick
Here's a quick tip,
To adjust width and height simply replace the old script bit in the block code above with this.


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