Carrusel de HTML con videos de youtube para detener el roatation hasta el final del video

Póster por primera vez aquí! Así que tengo este carrusel con el que he estado experimentando. Conozco los conceptos básicos de cómo funciona y decidí comenzar a analizar cómo funcionan los videos de YouTube en el carrusel. Aquí está el código tal como está actualmente:

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

Para que puedas ver el código en acción, este es el enlace:http://www.brassbellmusic.com/t-test1.aspx Como ve, hay los logotipos laterales, así como la imagen / video principal. Mi primera pregunta con el video sería, ¿cómo obtengo una imagen en el lateral del video, como la miniatura real de YouTube para el video en YouTube? La segunda pregunta es ¿cómo puedo cambiar las diapositivas cuando finaliza el video? Al igual que si tengo varios videos seguidos, ¿cómo puedo finalizar uno y pasar al siguiente? No busco que se reproduzcan automáticamente, solo cambia las diapositivas en cuanto finaliza el video, de lo contrario no quiero que el carrusel se mueva en absoluto. De ahí la línea:

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

Esa fue la mejor solución que pude encontrar momentáneamente. No sé qué más porque soy nuevo en el código html. (Vengo de Java y C ++) ¡Si esto fue un poco confuso, por favor avíseme! ¡Mis disculpas por adelantado así como mis gracias!

Respuestas a la pregunta(0)

Su respuesta a la pregunta