HTML carousel with youtube videos stop roatation until end of video

Question

First time poster here! So I have this carousel that I have been experimenting with. I know the basics of how it works and decided to start messing around with how YouTube videos work in the carousel. Here is the code as it stands currently:

<br>
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="jslidernews2" class="lof-slidecontent" style="width:600px; height:300px;">
<div class="preload">
<div></div>
</div>
<!-- MAIN CONTENT -->
     <div class="main-slider-content" style="width:450px; height:278px;">
     <ul class="sliders-wrap-inner">
     <li><a href="index1.html">
     </a><a href="http://www.facebook.com/events/186540518133184/"><img src="/images/video_wall.png" title="" height="278" width="450">   </a>
     </li>
     <li>
     <a href="t-lessons.aspx"><img src="/images/lessons_registering.png" title="" height="278" width="450"></a>
     </li>
     <li>
     <a href="aeRntSchoolSelect.aspx"><img src="/images/e_rentals.png" height="278" width="450"></a>
    </li>
     <li>
     <a href="http://stores.ebay.com/Brass-Bell-Music-Store"><img src="/images/ebay_event.png" height="278" width="450"></a>
     </li>
     <li>
     <iframe height="278" width="450" src="http://www.youtube.com/embed/ZkK4D3eOYb0" frameborder="0" allowfullscreen></iframe>
     </li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
     <li>
     <div>
     <img src="/images/thumbs/video_wall_2.png">
     </div>
     </li>
     <li>
     <div>
     <img src="/images/thumbs/lessons_registering_2.png">
     </div>
     </li>
     <li>
     <div>
     <img src="/images/thumbs/e_rentals_2.png">
     </div>
     </li>
     <li>
     <div>
     <img src="/images/ebay_event.png">
     </div>
     </li>
     <li>
     <div>
     <img src="/images/ebay_event.png">
     </div>
     </li>
</ul>
</div>
</div>
<!----------------- END OF NAVIGATOR --------------------->
<div><a href="#" id="carouselstop"></a></div>
</div>

So you can see the code in action, this is the link: http://www.brassbellmusic.com/t-test1.aspx As you see there are the side logos, as well as the main image/video. My first question with the video would be, how do I get and image on the side for the video, like the actual YouTube thumbnail for the video on YouTube? The Second question is how do I have it change slides when the video finishes? Like if I have multiple videos in a row, how do I have it end one and move to the next? I am not looking to have them auto play, just change slides as soon as a video finishes, otherwise I don't want the carousel to move at all. Hence the line:

<div><a href="#" id="carouselstop"></a></div>

That was the best fix I could come up with momentarily. I don't know what else to because I am new to html code. (I come from Java and C++) If this was at all confusing please let me know! My apologies in advance as well as my thanks!