Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
/* POSITION / SIZE OF THE VIDEOS. Replace values for left, top, right and bottom with whatever you want. Experiment with it. */
.video_container {position: absolute; left:120px; top: 120px; right: 120px; bottom: 110px; border: 1px solid black}
/* POSITION / SIZE OF THE VIDEOS INFO BOX placed above the video. Values for left and right must be the same as the values given to left and right for the videos. The top value for the info box is 40px lower than the top value for the video, since the height of the box equals 40 px. */
.video_info {position: absolute; left:120px; top: 80px; right: 120px; height: 40px; bottom: 110px; background: black; color: white; overflow: auto; text-align: center; font-family: verdana; font-size:11px; padding-top:5px}
/* POSITION / SIZE OF THE VIDEOS STOP BUTTON placed above the video (top right). Value for top must be the same as the top value given for the video_info box. Value for right must be 17px higher than the right value given for the video_info box (needed because of a possible scroll bar in the video-info box). */
.stop_button {position: absolute; top: 80px; right: 137px;cursor: pointer; background: black; color: white;font-weight: bold}
</style>
<script type="text/javascript">
/* Function for loading videos.
Usage (just some examples):
onclick="load_video('XT_1iRIQqsQ','','') (video starts at the beginning; no video-info
onclick="load_video('XT_1iRIQqsQ',null,'') (video starts at the beginning; no video-info
onclick="load_video('XT_1iRIQqsQ',0,'') (video starts at the beginning; no video-info
onclick="load_video('XT_1iRIQqsQ',50,'') (video starts at 50 secs from start; no video-info
onclick="load_video('XT_1iRIQqsQ',150,'Some <b>info<\/b> <i>here<\/i>') (video starts at 150 secs from start; video-info
etc.
Note: you must use backslash characters for the HTML in the info-box
Change the values for rel, autoplay, showinfo, autohide and modestbranding below, and see what happens
*/
function load_video(video_id,beginpoint,info_about_video)
{
frames['my_videos'].location.replace('http://www.youtube.com/embed/'+video_id+'?start='+beginpoint+'&rel=0&autoplay=1&showinfo=0&autohide=0&modestbranding=1');
//Don't edit below. These lines ensure smooth transition between videos and solid functioning in all modern browsers
document.getElementById('smooth_transition').style.display='block';
document.getElementById('video_container').style.width='100px';
document.getElementById('video_container').style.height='10000px';
document.getElementById('video_container').style.left='-100px';
document.getElementById('video_container').style.visibility='hidden';
if(document.getElementById('info').innerHTML.length>0){document.getElementById('info').innerHTML=info_about_video} else {document.getElementById('info').innerHTML=''};
document.getElementById('replay').style.display='none';
setTimeout("document.getElementById('smooth_transition').style.display='none'",3500)
setTimeout("document.getElementById('video_container').style.width=''",3500)
setTimeout("document.getElementById('video_container').style.height=''",3500)
setTimeout("document.getElementById('video_container').style.left=''",3500)
setTimeout("document.getElementById('video_container').style.visibility='visible'",150)
current_video=video_id
current_beginpoint=beginpoint
current_info=info_about_video
}
//Start a video on page load
function start_video_onload()
{
load_video('Tek_i2d7bP4',0,'<br><b>The Cro-Magnon Man<\/b>')
}
window.onload=start_video_onload
</script>
</head>
<!-- The body must have 'overflow: hidden' in order for all of this to function well -->
<body style="font-family: verdana; font-size:12px;overflow: hidden" ><div>
<!-- VIDEO CONTAINER. We document.write the iframe for validation -->
<div id="video_container" class="video_container">
<script type="text/javascript">
document.write('<iframe name="my_videos" style="position: absolute; width: 100%; height: 100%; background: black" frameborder="0"><\/iframe>')
</script>
</div>
<!-- REPLAY BUTTON appears after a click on the stop button -->
<div id="replay" style="position: absolute; color: white; background: black; left:48%;top: 50%; cursor: pointer; z-index: 1; display:none" onclick="load_video(current_video,current_beginpoint,current_info)">Replay</div>
<!-- SMOOTH VIDEO TRANSITION. The iframe used for showing the load icon is document.written in non-IE for validation. You must create a separate file called 'loading.html'. In this file we must put:
<body style="background: black">
<div style="position: absolute; left:50%; top: 50%; margin-left:-50px; margin-top: -50px"><img src="loading.gif" height="40" width="80"></div>
Note that we should have a transparent loading gif. Can be found on the Internet.
-->
<!--[if IE]>
<div class="video_container" style="border: 1px solid black; background: black">
<iframe name="smooth_transition" id="smooth_transition" src="loading.html" style="position: absolute; width: 100%; height: 100%; overflow: hidden; " frameborder="0"></iframe>
</div>
<![endif]-->
<!--[if !IE]><!-->
<div class="video_container" style="border: 1px solid black;">
<script type="text/javascript">
document.write('<iframe name="smooth_transition" id="smooth_transition" src="loading.html" style="position: absolute; width: 100%; height: 100%; overflow: hidden; " frameborder="0"><\/iframe>')
</script>
</div>
<!--<![endif]-->
<!-- INFO BOX -->
<div id="info" class="video_info">info</div>
<!--The STOP BUTTON. We need the delay for IE -->
<div class="stop_button" onclick="setTimeout('frames[\'my_videos\'].location.replace(\'about:blank\')',500); document.getElementById('replay').style.display='block'">X</div>
<!-- PLAYLIST USING THUMBNAILS -->
<!-- In this example-list, we have 4 thumbnails. For a YouTube video having id='XT_1iRIQqsQ' (for instance), you can find a corresponding thumbnail by writing <img src="http://img.youtube.com/vi/XT_1iRIQqsQ/1.jpg" bla bla> or <img src="http://img.youtube.com/vi/XT_1iRIQqsQ/2.jpg" bla bla> or <img src="http://img.youtube.com/vi/XT_1iRIQqsQ/3.jpg" bla bla>
Each thumbnail's width equals 80px here. Suppose we only want to explicitly show 3 thumbnails. Then the width of the outer div for the playlist must equal 3x80=240px. The width of the inner div must ewqual 4x80=320px. -->
<!-- Outer div for the playlist -->
<div style="position: absolute;bottom: 5px;left: 50%; margin-left: -120px; width: 240px; overflow-y: hidden; overflow-x: auto; border:2px solid black">
<!-- Inner div for the playlist -->
<div style="width: 320px">
<a style="float: left" onclick="load_video('XT_1iRIQqsQ',0,'<b>Rachmaninov<\/b>: Symphony No. 2 - Second Movement<br><i>Alasdair Neale<\/i>, San Francisco Youth Symphony')"><img src="http://img.youtube.com/vi/XT_1iRIQqsQ/1.jpg" height="60" width="80" title="Rachmaninov" alt="" style="cursor: pointer"></a>
<a style="float: left" onclick="load_video('jmOxTx0szas',3, '<b>Mendelssohn<\/b>: Symphony No. 4 - Second Movement<br><i>Ulyses Ascanio<\/i>, National Youth Orch. of Venezuela')"><img src="http://img.youtube.com/vi/jmOxTx0szas/1.jpg" height="60" width="80" title="Mendelssohn" alt="" style="cursor: pointer"></a>
<a style="float: left" onclick="load_video('vt4X7zFfv4k',17,'<br><b>The Beauty of SOCCER<\/b>')"><img src="http://img.youtube.com/vi/vt4X7zFfv4k/1.jpg" height="60" width="80" title="Soccer" alt="" style="cursor: pointer"></a>
<a style="float:left" onclick="load_video('Tek_i2d7bP4',0,'<br><b>The Cro-Magnon Man<\/b>')"><img src="http://img.youtube.com/vi/Tek_i2d7bP4/2.jpg" height="60" width="80" title="The Cro-Magnon Man" alt="" style="cursor: pointer"></a>
</div></div>
<!-- PLAYLIST USING TEXT LINKS. DON'T FORGET TO USE THE 'HREF=...' IN THE TEXT LINKS, AS NOT USING IT MAY CAUSE FLICKER ON VIDEO TRANSITION IN IE-->
<div style="position: absolute; top: 40px; left: 50%; width: 340px; margin-left: -170px; ">
<a href="javascript: void(0)" style="color: darkred" onclick="load_video('XT_1iRIQqsQ',0,'<b>Rachmaninov<\/b>: Symphony No. 2 - Second Movement<br><i>Alasdair Neale<\/i>, San Francisco Youth Symphony')">Rachmaninov</a>
<a href="javascript: void(0)" style="color: darkred" onclick="load_video('jmOxTx0szas',3, '<b>Mendelssohn<\/b>: Symphony No. 4 - Second Movement<br><i>Ulyses Ascanio<\/i>, National Youth Orch. of Venezuela')">Mendelssohn</a>
<a href="javascript: void(0)" style="color: darkred" onclick="load_video('vt4X7zFfv4k',17,'<br><b>The Beauty of SOCCER<\/b>')">Soccer</a>
<a href="javascript: void(0)" style="color: darkred" onclick="load_video('Tek_i2d7bP4',0,'<br><b>The Cro-Magnon Man<\/b>')">Cro-Magnon</a>
</div>
<!-- ENJOY! -->
</div></body>
</html>
Demo
Bookmarks