我已经得到了通过的fancybox 2被打开一个IFrame播放的视频:
HTML:
<a class="fancybox-video" href="/user/intro-file.cfm" rel="file_name" title="View Video">File Name</a>
使用Javascript:
$("a.fancybox-video").fancybox({
scrolling : 'no',
type : 'iframe',
helpers : {
title: null
}
});
该视频是用户上传的,所以我不知道大小。 我最终将设置在一个的fancybox和maxHeight maxWidth,但我已经删除它们更容易排除故障。
我如何设置的fancybox的基于内容的宽度? 与我的测试文件,它是围绕400像素宽,的fancybox本身被设置为830/800像素宽(外部和内部宽度): 太宽的fancybox的撷取画面http://img528.imageshack.us/img528/3872/ fancyboxwidth.png
autoSize的和fitToView没有任何效果。 有被设置默认宽度IFrame的页面上没有CSS或代码。 如果我强迫的宽度在的fancybox代码它的工作原理,但因为我的内容是动态的,它不会对正在运行的系统工作。
我也试着适应从另一个问题问的高度调整大小的功能,但它没有工作,要么:
beforeShow : function() {
$('.fancybox-iframe').load(function() {
$('.fancybox-inner').width($(this).contents().find('body').width());
});
}
编辑:增加了IFrame的页面我试图加载到的fancybox的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<cfoutput>
<script type="text/javascript" src="/Javascript/jwplayer.js"></script>
<script type='text/javascript'>
var max_video_width = 924;
jwplayer("preview").setup({
flashplayer: "/VideoPlayer/player.swf",
controlbar: "bottom",
file: "/videos/file_name",
stretching: 'file_name',
autostart: true,
events: {
onMeta: function(event) {
if (get_meta) {
if(event.metadata.width != undefined && event.metadata.height != undefined) {
get_meta = false;
if (event.metadata.width > max_video_width) {
var new_height = (max_video_width / (event.metadata.width / event.metadata.height))
jwplayer("preview").resize(max_video_width,new_height);
jwplayer("preview").stop();
$('##preview_wrapper').width(max_video_width).height(new_height);
}
else {
jwplayer("preview").resize(event.metadata.width,event.metadata.height);
jwplayer("preview").stop();
$('##preview_wrapper').width(event.metadata.width).height(event.metadata.height);
}
$('.loading-video').slideUp('fast',function(){$('.loading-video').remove()});
}
}
}
}
});
</script>
</cfoutput>
</body>
</html>