Show inline html(comments) with photos fancybox - fancybox

Question

I am working on a webapp where I need to show comments along with the photo using fancybox. The comments are custom and not from facebook. I am using beta 3 version of fancybox which includes all the features of fancybox 2.3, I hope.
below is the code, I have tried:
$("[rel='fancybox-thumb']").fancybox({
helpers : {
thumbs : true,
},
caption : {
type : 'inside',
position: 'right'
},
fitToView : false,
autoSize : false,
width : 600,
height : 'auto',
mouseWheel: false,
afterLoad: function () {
if(in_array(media, this.href,false)){
var orientation = $(this.element).data('orientation');
var width = 640;
var height = 480;
if(orientation == 3){
var datasetup = '{ "plugins": { "zoomrotate": { "rotate": "180", "zoom": "1.0" } } }';
}
else if(orientation == 1){
var datasetup = '{ "plugins": { "zoomrotate": { "rotate": "90", "zoom": "1.0" } } }';
}
else{
var datasetup = '{ "plugins": { "zoomrotate": { "rotate": "360", "zoom": "1.0" } } }';
}
this.content ='<video id="parse-video" class="video-js vjs-default-skin vid" width="'+width+'" height="'+height+'" data-setup="'+datasetup+'" preload="auto" poster="ajax-loader.gif" autoplay ><source src="'+this.href+'" type='+type+' />' +
'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
'<object id="flash_fallback_1" class="vjs-flash-fallback" width="'+width+'" height="'+height+'" type="application/x-shockwave-flash"' +
'data="/players/flowplayer/flowplayer.swf">' +
'<param name="movie" value="/players/flowplayer/flowplayer.swf" />' +
'<param name="allowfullscreen" value="true" />' +
'<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": '+ this.href + ',"autoPlay":true,"autoBuffering":true}]}\' />' +
'<!-- Image Fallback. Typically the same as the poster image. -->' +
'<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' +
' title="No video playback capabilities." />' +
'</object>' +
'</video><div>lorem ipsum lorem ipsum</div>' ;
}
else{
//$(".fancybox-inner").css('display','inline-block').wrap('<div style="display: inline-block" id="wrapper"></div>');
//$('#wrapper').prepend('<div style="display:inline-block" id="content-div">Some content here</div>');
$(".fancybox-wrap").css('width',$(".fancybox-wrap").width()+200);
}
},
beforeShow: function(){
console.log($(".fancybox-wrap").width());
$(".fancybox-wrap").css('visibility','hidden');
$(".fancybox-wrap").css('width',$(".fancybox-wrap").width()+200);
$(".fancybox-wrap").append('<div style="width:190px;display:inline-block">this is the comment</div>');
$(".fancybox-inner").css('display','inline-block');
},
afterShow: function(){
if(in_array(media, this.href,false)){
var my_video_id = videojs('parse-video-'+i);
var orientation = $(this.element).data('orientation');
if(orientation == 3){
my_video_id.zoomrotate({
rotate: 180,
zoom: 1.0
});
}else if(orientation == 1){
my_video_id.zoomrotate({
rotate: 90,
zoom: 1.0
});
}else{
my_video_id.zoomrotate({
rotate: 360,
zoom: 1.0
});
}
}else{
}
}
//'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
//'onClosed': function () { $("#fancybox-inner").empty(); },
});
Also, I am playing videos in fancybox. I am able to show text along with images this way but window resize disturbs the css. many thanks in advance.