YouTube is a growing platform for video shares.With its free services many people own a youtube channel.Videos are great way to learn something than by just reading.Many blogger uses youtube to share their videos on youtube and then embed the video in their post.But by default youtube has a default style for embedded player.In this post I will explain you the different methods of customizing the youtube embedded player.You can also learn to add light version of the video player to decrease page load time.
The video ID can be located from the URL of the video.For example in this URL http://www.youtube.com/watch?v=85GqVYeyn18 the video ID is 85GqVYeyn18
A sample video player of the above code.
Replace the video ID with your video ID.Change the size of small player,normal player and big player by changing the values inside resizePlayer(***, ***) with your desired width and height respectively.
Change the default video to load by replacing the video ID with your video ID in the video to load section.
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.
Blogger Comment
Facebook Comment