Simple jQuery Shadowbox

jquery.simple-shadowbox.js

(function ($) {

    var template = function (contents) {
        return [
            '<div id="jquery-shadowbox" class="jquery-shadowbox">',
                '<div id="jquery-shadowbox-video" class="jquery-shadowbox-video">',
                    contents,
                '</div>',
            '</div>'
        ].join('');
    };

    var Shadowbox = function (config, el) {
        this.contents = config.contents;
        this.$el = $(el);
        this.add();
    };

    $.extend(Shadowbox.prototype, {

        add : function () {
           $( template(this.contents) )
                .appendTo(this.$el)
                .fadeIn()
                .on('click', this.remove);

            $(window).resize(this.resize).resize();
        },

        resize : function () {
            $('#jquery-shadowbox').css({
                height : $(window).height()
            });
        },

        remove : function () {
            $('#jquery-shadowbox').remove();
        }

    });

    $.fn.shadowbox = function (config) {
        return this.each(function () {
            new Shadowbox(config, this);
        });
    };

}(jQuery));

style.css

.jquery-shadowbox {
    background: url('ui/black-80.png');
    display: none;
    position: fixed;
        left: 0;
        top: 0;
    width: 100%;
    z-index: 9999;
}

    .jquery-shadowbox-video {
        margin-left: -320px;
        margin-top: -180px;
        position: absolute;
            left: 50%;
            top: 50%;
        width: 640px;
        height: 360px;
    }