Youtube API and javascript questions

I know this has to be totally ghetto, but I'm trying to figure out how to get a feed of my youtube links to display on my homepage in a somewhat stylish fashion. I get tired of having to post something on youtube, then create a post on my website that is basically a duplication of the youtube post. Perhaps there is already something out there that has this functionality built in, but so far I haven't seen it. I have a couple questions about what I'm trying to accomplish thus far:

1. How can I update my code so I can use 'this' in my youTubeMe object verse having to reference the variable name. I'm pretty sure I understand why I can't use it how I'm doing it currently, but I don't know how to fix?

2. Second, the google api seems a bit weird to me. I'm not too stoked about using iFrames and the split operati开发者_C百科on I have to do in order to get the VideoId can't be correct.

3. Any advice would be greatly appreciated. I'll post the code, but you can also find a working example here

HTML:

<div id="pager">
</div>
<div id="player">
</div>
<script type="text/javascript">
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubePlayerAPIReady() {
        youTubeMe.init();
    }

</script>

JAVASCRIPT:

var youTubeMe = {
    pageSize: 10,
    player: null,
    startIndex: 1,
    username: 'google',

    init: function() {
        $.getJSON('http://gdata.youtube.com/feeds/users/' + this.username + '/uploads?alt=json&start-index=' + this.startIndex + '&max-results=' + youTubeMe.pageSize, youTubeMe.createYouTubePlayers);
    },

    createYouTubePlayers: function(data) {
        $('#player').empty();
        $('#pager').empty();
        if (data.feed.entry.length < youTubeMe.pageSize) {
            youTubeMe.createPreviousButton();
        } else {
            if (youTubeMe.startIndex !== 1) {
                youTubeMe.createPreviousButton();
            }
            youTubeMe.createNextButton();
        }

        for (var i = 0; i < data.feed.entry.length; i++) {
            player = new YT.Player('player', {
                height: '195',
                width: '320',
                videoId: data.feed.entry[i].id.$t.split('/')[5]
            });
        }
    },

    createNextButton: function() {
        $('<a id=\"next\" href=\"#\">next</a>').appendTo('#pager');
        $('#next').click(function(e) {
            e.preventDefault();
            youTubeMe.startIndex += youTubeMe.pageSize;
            youTubeMe.init();
        });
    },

    createPreviousButton: function() {
        $('<a id=\"prev\" href=\"#\">prev</a>').appendTo('#pager');

        $('#prev').click(function(e) {
            e.preventDefault();
            youTubeMe.startIndex -= youTubeMe.pageSize;
            youTubeMe.init();
        });
    }

};

CSS:

iframe { margin: 20px; }
#pager { background-color: #666; line-height: 3em; text-align: center; }
#pager a { color: #fff; font-size: 1.8em; margin: 0 15px; }

The way you should go is create a closure and have everything contained in that. You can do it like this:

//a closure function that calls itself
(function(){

    //with var it would be private and not accesable like this: 
    //youTubeMe.pageSize
    var pageSize = 10;

    //declare a global reference to the youTubeMe object
    var youTubeMe = window.youTubeMe = function(){

    };

    //with youTubeMe.* it is accessable from anywhere in your page
    //you can either
    //declare a public variable like this
    youTubeMe.player = "youtube player";
    //or a public method like this
    youTubeMe.foo = function(){
        //this "this" here is your youTubeMe object
        console.log(this);
        bar();
    };

    //like the private variable at the top, this function is private
    //and can only be called from inside the youTubeMe object   
    function bar(){
        //this "this" here is the window
        console.log(this);
    }

})();


console.log(youTubeMe.player); //out puts youtube_player 
youTubeMe.foo(); //outputs the youTubeMe object
youTubeMe.bar() //throws an undefined error

As for the youtube api; I've always found it to be really good. I've never used the iframe embed just because "iframe embed" sounds not right to me. If you use the youtube api you have two options: Embedded player or the chromeless player. Take a look at the embedded player because unless you want to build a custom skin for your player, its the way to go. Creating a playlist becomes easy when you use the api because you let javascript do all the playing and playlist stuff.

Hope that helps.