Professional & Impressive. We provide top quality free SMF themes with excellent support.

YouTube Video Carousel

Mick in Tutorials on Dec 24, 2019


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:

Tagged with: smf youtube video html responsive 


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


1 Comments

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>
1




Latest Discussions

Join the conversation

Our Most Popular Features