JQuery how to load next video automatically at the end of previous video?

JQuery how to load next video automatically at the end of previous video?

i have this list of videos
watch?v=IcrbM1l_BoI
watch?v=t2hlcavdwrQ
watch?v=lDK9QqIzhwk
and i want those videos to play on full screen and load automatically the
next one without exiting from full screen (like on 9gag.tv) any ideas? I
attached down my code
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$('.buton_video').click( function(e){
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="738" height="450"
src="http://www.youtube.com/embed/' + URL +
'?wmode=transparent&rel=0&theme=light&color=white&autoplay=1"
frameborder="0" allowfullscreen ></iframe>';
$('#video_div').html(htm);
return false;
});
});
});//]]>
</script>
<a href="IcrbM1l_BoI" class="buton_video">Avicii - Wake me up</a><br/>
<a href="t2hlcavdwrQ" class="buton_video">Ahmed Chawki feat Pitbull -
HABIBI I Love You</a><br/>
<a href="lDK9QqIzhwk" class="buton_video">Bon Jovi - Livin' On A
Prayer</a><br/>
<div id="video_div">
<iframe width="738" height="450"
src="http://www.youtube.com/embed/IcrbM1l_BoI?wmode=transparent&rel=0&theme=light&color=white&autoplay=1"
frameborder="0" allowfullscreen ></iframe>
</div>
Any help? Thanks!