我有一个安装了fancyBox的网站和一个包含图片和视频的图库。 然而，图像的外观与视频有很大不同。
以下是相关的图库： http://imaginefilmscommunication.com/site/#portfolio
（目前唯一的视频是画廊中的最后一个视频） 我希望视频看起来像图像（底部的大白边框而不是圆角的黑色矩形......）
这是在JavaScript或css中完成的吗？
答案 0 :(得分：0)
如果您希望视频看起来像图像，则对图像和视频使用相同的 类选择器 ，并将media: {}添加到{ {1}} API选项（使用您当前的代码）：
helpers然后将（视频）html中的班级选择器从$(".fancybox").fancybox({
helpers: {
title: {
type: 'inside'
},
media: {} //<== added for videos
},
padding: 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4><hr class="gray">' + $(this.element).find('img').attr('alt');
if (this.title) {
// New line
this.title += '<br />';
}
},
afterShow: function () {
// Render tweet button
twttr.widgets.load();
}
});
更改为fancybox-media，这样
fancybox进入这个
<a class="project-wrp fancybox-media" title="Lorem ipsum dolor sit amet" rel="group7" href="https://vimeo.com/34134308">...</a>
注意那个
<a class="project-wrp fancybox" title="Lorem ipsum dolor sit amet" rel="group7" href="https://vimeo.com/34134308">...</a>
对图像没有任何影响，因此您可以安全地组合选项。
请参阅 JSFIDDLE （第二个拇指打开视频）