Monday, February 25, 2013

Ramayana in Playlist with Javascript


Put JavaScript in header

<script type="text/javascript">
var s = new Array();
s[0] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/jlsiMypXPeE' frameborder='0' allowfullscreen></iframe>";
s[1] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/7srkammupw4' frameborder='0' allowfullscreen></iframe>";
s[2] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/UoxrRk0Yeyg' frameborder='0' allowfullscreen></iframe>";
s[3] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/LkN6ItmkXps' frameborder='0' allowfullscreen></iframe>";
s[4] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/wEJMxeE53XY' frameborder='0' allowfullscreen></iframe>";
s[5] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/ZdRDjJ26d50' frameborder='0' allowfullscreen></iframe>";
s[6] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/l_WXaKMyCHw' frameborder='0' allowfullscreen></iframe>";
s[7] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/azjGt0_-lXQ' frameborder='0' allowfullscreen></iframe>";
s[8] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/_yW260GQG98' frameborder='0' allowfullscreen></iframe>";
s[9] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/pSrp-p0CfFw' frameborder='0' allowfullscreen></iframe>";
s[10] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/wMVWV9aJNVY' frameborder='0' allowfullscreen></iframe>";
s[11] = "<iframe width='400' height='225' src='http://www.youtube.com/embed/5-7lCpYUE6U' frameborder='0' allowfullscreen></iframe>";


var tt = new Array();
tt[0] = "tt00";
tt[1] = "tt01";
tt[2] = "tt02";
tt[3] = "tt03";
tt[4] = "tt04";
tt[5] = "tt05";
tt[6] = "tt06";
tt[7] = "tt07";
tt[8] = "tt08";
tt[9] = "tt09";
tt[10] = "tt10";
tt[11] = "tt11";


function changeVideo(e) {
var sender = (e && e.target) || (window.event && window.event.srcElement);

for (i = 0; i < s.length; i++) {
if (document.getElementById(tt[i]).id == sender.id) {
document.getElementById("ytVideo").innerHTML = s[i];
}
}
}

</script>

Scipt in body tag

<div id="ytVideo"><iframe width='400' height='225' src='http://www.youtube.com/embed/jlsiMypXPeE' frameborder='0' allowfullscreen></iframe></div> <hr>
<font color="blue">
<input type='button' value='Part 01' id='tt00' onclick='changeVideo()'>
<input type='button' value='Part 02' id='tt01' onclick='changeVideo()'>
<input type='button' value='Part 03' id='tt02' onclick='changeVideo()'>
<input type='button' value='Part 04' id='tt03' onclick='changeVideo()'>
<input type='button' value='Part 05' id='tt04' onclick='changeVideo()'>
<input type='button' value='Part 06' id='tt05' onclick='changeVideo()'>
<input type='button' value='Part 07' id='tt06' onclick='changeVideo()'>
<input type='button' value='Part 08' id='tt07' onclick='changeVideo()'>
<input type='button' value='Part 09' id='tt08' onclick='changeVideo()'>
<input type='button' value='Part 10' id='tt09' onclick='changeVideo()'>
<input type='button' value='Part 11' id='tt10' onclick='changeVideo()'>
<input type='button' value='Part 12' id='tt11' onclick='changeVideo()'>
</font>

No comments:

Post a Comment