YouTube Video Carousel

Mick in Tutorials on Dec 24, 2019

"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:






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 Pizza.

  Connect with us:

     

  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,202 SMF owners prefer our themes



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








  Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.