Youtube API: HTML5 Chromeless Player (Using iframe API)

Now we can customize the appearance of html5 YouTube player as per our design. Like the AS3 flash player we can also create chromeless player for HTML5 in YouTube API. To embed the YouTube video uses the following script.

        <script>
              var myPlayer;
              function onYouTubePlayerAPIReady() {
                      myPlayer = new YT.Player('myVideo', {
                         height: '390',
                         width: '640',
                         videoId: 'u1zgFlCw8Aw',
                         playerVars: {
                             'start': 10
                        },
                        events: {
                             'onReady': callBack1,
                             'onStateChange':  callBack2
                        }
                   });
            }
        </script>

( The method of integratting the new iframe API or embeding HTML5 YouTube player is discussed in the session 'New YouTube API for both flash and HTML5'.) 

The above script will create a YouTube player with its-own controls. We can simply get a chromeless player adding " controls: '0' " in the player vars. ie,

<script>
              var myPlayer;
              function onYouTubePlayerAPIReady() {
                      myPlayer = new YT.Player('myVideo', {
                         height: '390',
                         width: '640',
                         videoId: 'u1zgFlCw8Aw',
                         playerVars: {
                             'start': 10,
                              controls: '0'
                        },
                        events: {
                             'onReady': callBack1,
                             'onStateChange':  callBack2
                        }
                   });
            }
        </script>

This script will add a chromeless player in the web pages.

we can also use the iframe tag method by adding a query string controls=0 in the src attribute ie,

 <iframe frameborder="0" title="YouTube video player" type="text/html" height="390" width="640" src="http://www.youtube.com/embed/JW5meKfy3fY?controls=0&enablejsapi=1&origin=http://mysite.com"></iframe>


Note: This post is for my reference, donate me by clicking the adds.