加载自定义youtube播放器divs onclick不起作用

Question

我有这个youtube播放器，可以使用javascript制作的缩略图加载播放列表或频道。现在的想法是在一个页面上显示隐藏有youtube播放器的div，当点击链接时会出现相应的播放器。

我的youtube播放器工作，还有div隐藏和显示作品。但是当我尝试使用装有youtube播放器的div时，会出现故障。

请帮帮我，真的可以帮到我。

（我必须将所有内容放在一个HTML文件中，因为我必须使用的托管不允许.css或.js文件）

这是我的代码：

<style>

.yt-descript{
    font-family: verdana;
    font-weight: bold;
    font-size: 9pt;
    margin: 2px;
}

.white{
    background-color: #FFFFFF;
    margin-bottom: 20px;

}

.grey{
    background-color: #F1F1F1;
    margin-bottom: 20px;


}

.player {
    width: 100%;
    height:420px;
    overflow: hidden;
    background-color: #F1F1F1 ;
    position: absolute;
    max-width: 960px;
}


.youtube .carousel {
    width: 20%;
    height: 100%;
    overflow: auto;
    position: absolute;
    right: 0px;
    z-index: 3;
}
.youtube .thumbnail {
    margin: 2px;
    width: 90%;
    border: 1px solid black;
}
.youtube iframe.player {
    width: 80%;
    height: 100%;
    overflow: auto;
    border: 0;
}

</style>

<script>

//HIDE AND SHOW DIVS

$(document).ready(function(){

        // Optional code to hide all divs
        $(".player").hide();
          // Show chosen div, and hide all others
        $("a").click(function (e) 
        {
                e.preventDefault();
            $("#" + $(this).attr("class")).show().siblings('div').hide();
        });

    });

//LOAD YOUTUBE PLAYER

(function () {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'http://www.youtube.com/embed/' + video.id;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src += k + '=' + options.playopts[k] + '&';
            }
            src += '_a=b';
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }

    function createCarousel(jqe, videos, options) {
        var car = $('div.carousel', jqe);
        if (car.length === 0) {
            car = $('<div>');
            car.addClass('carousel');
            jqe.append(car);

        }
        $.each(videos, function (i, video) {
            options.thumbnail(car, video, options);
        });
    }

    function createThumbnail(jqe, video, options) {
        var imgurl = video.thumbnails[0].url;
        var img = $('img[src="' + imgurl + '"]');
        var desc;
        var container;
        if (img.length !== 0) return;
        img = $('<img align="left">');
        img.addClass('thumbnail');
        jqe.append(img);
        img.attr('src', imgurl);
        img.attr('title', video.title);
        img.click(function () {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
        desk = $('<p class="yt-descript">' + video.title + '</p>');
        jqe.append(desk);
        desk.click(function () {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
    }

    var defoptions = {
        autoplay: false,
        user: null,
        playlist: null,
        carousel: createCarousel,
        player: createPlayer,
        thumbnail: createThumbnail,
        max_results: 25, // does not apply to playlists
        loaded: function () {},
        playopts: {
            autoplay: 0,
            egm: 1,
            autohide: 1,
            fs: 1,
            showinfo: 0,
            rel: 0
        }
    };


    $.fn.extend({
        youTubeChannel: function (options) {
            var md = $(this);
            md.addClass('youtube');
            md.addClass('youtube-channel');
            var allopts = $.extend(true, {}, defoptions, options);
            allopts.maindiv = md;
            var JSONurl = "";
            if (allopts.playlist) {
                JSONurl = 'http://gdata.youtube.com/feeds/api/playlists/' + allopts.playlist + '?alt=json-in-script&format=5&callback=?';
            } else if (allopts.user) {
                JSONurl = 'http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&max-results=' + allopts.max_results.toString() + '&format=5&callback=?';
            } else {
                console.log('user or playlist must be specified');
            }
            $.getJSON(JSONurl, null, function (data) {
                var feed = data.feed;
                var videos = [];
                $.each(feed.entry, function (i, entry) {
                    var video = {
                        title: entry.title.$t,
                        id: entry.link[3].href.match('[^/]*$'),
                        thumbnails: entry.media$group.media$thumbnail
                    };
                    videos.push(video);
                });
                allopts.allvideos = videos;
                allopts.carousel(md, videos, allopts);
                allopts.player(md, videos[0], allopts);
                allopts.loaded(videos, allopts);
            });
        }
    });

})();


// Ayrton
$(function () {
    $('#player1').youTubeChannel({
        playlist: 'PLOT2H44QhXtCnoCJDpcNR1veO0TBUpKeq'
    });
});

// Shure
$(function () {
    $('#player2').youTubeChannel({
        playlist: 'PLOT2H44QhXtA7UpzmhFts_P6HI5DKseyw'
    });
});

// Triad-Orbit
$(function () {
    $('#player3').youTubeChannel({
        playlist: 'PLOT2H44QhXtCqJ3jclLXUNj0MNc-lI2A6'
    });
});




</script>

<a href="" class="player1">Ayrton</a>
<a href="" class="player2">Shure</a>

<div class="grey">
<div id="player1" class="player"></div>
</div>

<div class="grey">
<div id="player2" class="player"></div>
</div>

谢谢！