10 February 2014

Top 5 Ways To Customize YouTube Embeds


Customize Youtube Embed Player
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 thedifferent methods of customizing the youtube embedded player.You can also learn to add light version of the video player to decrease page load time.

How To find video ID?
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

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>
 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.

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>
  Change the default video to load by replacing the video ID with your video ID in the video to load section.
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.

Sharing Is Caring