<script type="text/javascript">
/*
* Change out the video that is playing
*/
// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
// Loads the selected video into the player.
function loadVideo() {
var selectBox = document.getElementById("videoSelection");
var videoID = selectBox.options[selectBox.selectedIndex].value
if(ytplayer) {
ytplayer.loadVideoById(videoID);
}
}
// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}
// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onError", "onPlayerError");
}
/**
* Resizing the player in JavaScript.
*/
// Make the player small.
function smallPlayer() {
resizePlayer(480, 295);
}
// Set the player back to normal.
function normalPlayer() {
resizePlayer(560, 340);
}
// Set the loaded player to a specific height and width.
function resizePlayer(width, height) {
var playerObj = document.getElementById("ytPlayer");
playerObj.height = height;
playerObj.width = width;
}
// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "MM8dwh_Kde4"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&enablejsapi=1&playerapiid=player1",
"videoDiv", "480", "295", "8", null, null, params, atts);
}
// Make the player big.
function largePlayer() {
window.open("http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=player1","_blank","width=9999,height=9999,resize=1,toolbar=0,scrollbars=1");
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
<div id="videoDiv">Loading...</div>
<div id="videoControls">
<p>Select:</p>
<select id="videoSelection" onchange="loadVideo();">
<option value="MM8dwh_Kde4" selected>1 Video</option>
<option value="WObfcDIf6lY">2 Video</option>
<option value="PvYygjcMDdQ">3 Video</option>
</select>
<a href="javascript:smallPlayer()">Small Player</a>
<a href="javascript:normalPlayer()">Normal Player</a>
<a href="javascript:largePlayer()">Large Player</a>
</div>
