How to add Videos to 'Gallery and Videos' module

Hi, I have gone into source code of this module and added the links to videos but I can't seem to figure out how or where the thumbnails to these video clips are created? At this point the Video section is still blank? I assumed there should be thumbnails here that when clicked, link to the video in my case on YouTube?

Here's the source code:
<div id="music-band-videos">
<div id="video_nav">
<ul>
<li><a title="Cover of Bruno Mars 'The Lazy Song'" onclick="goto2('#video1', this); return false" href=" www.youtube.com/watch?v=_wIG6dX4lqo " target="_self">Video 1
<li><a title="James Brown Tribute Show - The Funkadelic Side" onclick="goto2('#video2', this); return false" href=" www.youtube.com/watch?v=91-5S52he-g " target="_self">Video 2
<li><a title="Super Bad - James Brown Tribute Show - The Funkadelic Side" onclick="goto2('#video3', this); return false" href=" www.youtube.com/watch?v=TYmGAVmmMwo " target="_self">Video 3
<li><a title="Because you said so - Live Performance" onclick="goto2('#video4', this); return false" href=" www.youtube.com/watch?v=-oWehEkaQA4 " target="_self">Video 4
</ul>
</div>
<div id="video_content">&nbsp;</div>
</div>

You need to configure your editor plugin (TinyMCE is joomla default) to allow iframe tag which is banned by default.

So I have gone into the custom HTML code and followed your advice but the videos are stacked on top of each other and are nothing like how videos are displayed on your demo site.

Here is my source code:

<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
<div id="pics_video">
<ul>
<li><a href="#music-band-pics">Pic</a></li>
<li><a href="#music-band-videos">Video</a></li>
</ul>
<div id="music-band-pics">
<div id="gallery_nav">
<ul>
<li><a class="active" href="#" onclick="goto('#slide1', this); return false">Slide 1</a></li>
<li><a href="#" onclick="goto('#slide2', this); return false">Slide 2</a</li>
<li><a href="#" onclick="goto('#slide3', this); return false">Slide 3</a</li>
<li><a href="#" onclick="goto('#slide4', this); return false">Slide 4</a></li>
<li><a href="#" onclick="goto('#slide5', this); return false">Slide 5</a></li>
</ul>
</div>
<div id="gallery_content">
<div class="contentbox-wrapper">
<div id="slide1" class="contentbox">{photogallery}images/pics/slide1{/photogallery}</div>
<div id="slide2" class="contentbox">{photogallery}images/pics/slide2{/photogallery}</div>
<div id="slide3" class="contentbox">{photogallery}images/pics/slide3{/photogallery}</div>
<div id="slide4" class="contentbox">{photogallery}images/pics/slide4{/photogallery}</div>
<div id="slide5" class="contentbox">{photogallery}images/pics/slide5{/photogallery}</div>
</div>
</div>
</div>
<div id="music-band-videos">
<div id="video_nav">
<ul>
<li><iframe width="560" height="315" src="//www.youtube.com/embed/_wIG6dX4lqo" frameborder="0" allowfullscreen="true">
<li><iframe width="560" height="315" src="//www.youtube.com/embed/-oWehEkaQA4" frameborder="0" allowfullscreen="true">
<li><iframe width="560" height="315" src="//www.youtube.com/embed/91-5S52he-g" frameborder="0" allowfullscreen="true">
<li><iframe width="420" height="315" src="//www.youtube.com/embed/TYmGAVmmMwo" frameborder="0" allowfullscreen="true">
</ul>
</div>
<div id="video_content">&nbsp;</div>
</div>
</div>

Clearly there is more needed to be done here to have the videos display the same as your demo? Do you have a backend login to the demo site so I can see how you have set this up? Or please reply with a step by step guide on how to set up the videos so they show exactly like your demo.

Please see my attachment to see how my videos are incorrectly displaying.

which our demo page you refer?

demo.hotjoomlatemplates.com/index.php?template=music_band

Note following part(as on our demo):