O carrossel de HTML com vídeos do youtube interrompe a transmissão até o final do vídeo

Cartaz da primeira vez aqui! Então eu tenho esse carrossel que eu tenho experimentado. Eu conheço o básico de como isso funciona e decidi começar a mexer em como os vídeos do YouTube funcionam no carrossel. Aqui está o código como está atualmente:

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

Então você pode ver o código em ação, este é o link:http://www.brassbellmusic.com/t-test1.aspx Como você vê, há os logotipos paralelos, assim como a imagem / vídeo principal. Minha primeira pergunta com o vídeo seria: como faço para obter uma imagem ao lado do vídeo, como a miniatura real do YouTube para o vídeo no YouTube? A segunda pergunta é como alterá-lo quando o vídeo termina? Como se eu tivesse vários vídeos seguidos, como termino um e passo para o próximo? Não estou querendo que eles sejam reproduzidos automaticamente, apenas mude os slides assim que o vídeo terminar, caso contrário, não quero que o carrossel se mova. Daí a linha:

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

Essa foi a melhor solução que eu poderia fazer momentaneamente. Eu não sei mais o que fazer porque eu sou novo em código html. (Eu venho de Java e C + +) Se isso foi confuso por favor me avise! Minhas desculpas antecipadamente, assim como meus agradecimentos!

questionAnswers(0)

yourAnswerToTheQuestion