How To find video ID?
Different Customized Players
Style 1 : Default Player
The default player can be easily embedded into your webpage.The code for the default player is given below.
<iframe width="420" height="315" src="//www.youtube.com/embed/Video ID" frameborder="0" allowfullscreen></iframe>
|
Replace the video ID with your video ID.
Style 2 : Only Thumbnail + Circle Play Button
This is a light weight version of the player.This embed player doesn't have the button panel and id chromeless.This player has a thumbnail preview with a circle play button at the center.This is a quick way of loading your webpage.This code can reduce your page size by over 300kb.We highly recommend to use this.
To add an embedded player like this use the below code.
<div class="youtube" id="Your Video ID" style="width: 320px; height: 180px;"></div>
|
A sample video player of the above code.
Style 3 : Resize Player Option
If you want to provide an option to change your video player size embedded in a post you can use the below code.
<style type="text/css">
#videoDiv {
margin-right: 3px;
}
#videoInfo {
margin-left: 3px;
}
</style>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
/**
* 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);
}
// Make the player big.
function largePlayer() {
resizePlayer(640, 385);
}
// 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 = "YOUR VIDEO ID"
// 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 +
"?version=3&enablejsapi=1&playerapiid=player1",
"videoDiv", "560", "340", "9", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<table>
<tr>
<td><div id="videoDiv">Loading...</div></td>
<td valign="top">
<div id="videoInfo">
<a href="javascript:smallPlayer()">Small Player</a>
<a href="javascript:normalPlayer()">Normal Player</a>
<a href="javascript:largePlayer()">Large Player</a>
</div>
</td></tr>
</table>
</body>
</html>
|
Style 4 : Change The Playing Video
If you want to embed a video player that has an option to change the playing video use the code below.
<style type="text/css">
#videoDiv { margin-right: 3px; } #videoInfo { margin-left: 3px; } </style> <script src="//www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("swfobject", "2.1"); </script> <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"); } // The "main method" of this sample. Called when someone clicks "Run". function loadPlayer() { // The video to load var videoID = "ylLzyHk54Z0" // 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 + "?version=3&enablejsapi=1&playerapiid=player1", "videoDiv", "480", "295", "9", null, null, params, atts); } function _run() { loadPlayer(); } google.setOnLoadCallback(_run); </script> </head> <body style="font-family: Arial;border: 0 none;"> <table> <tr> <td><div id="videoDiv">Loading...</div></td> <td valign="top"> <div id="videoControls"> <p>Select a video to load:</p> <select id="videoSelection" onchange="loadVideo();"> <option value="Video ID" selected>Video Title </option> <option value=" Video ID "> Video Title </option> <option value=" Video ID "> Video Title </option> </select> </div> </td></tr> </table> |
To add different options change the video ID and the video title at the end of the code.The below is demonstration of the code.
Loading...
|
Select a video to load:
|
Style 5 : YouTube Player Generator With Custom Options
If you want to add a different styled player then use the Youtube Player Generator.It offers a variety of custom options.
How can we improve this post?Which player you liked the most.Tell us your opinion in comments.
