fancybox 视频弹窗

刚了解了下dplayer所以，兴起，想试试看看fancybox怎么弹出视频。

我去fancybox官网了解了一下，发现一个官方的弹窗有三个例子，头两个都是使用原生的video标签，这就不是很方便了，因为目前来说，能拿到mp4这种通用格式的视频文件直连很难了。

加上我本身就是要使用插件Dplayer的，所以要使用第三种方式，href关联id。

结构如下：

<a href="#video" data-fancybox="video">点击查看视频</a>

<div id="video" class="video-none" data-dplayer data-video-href="视频文件链接" data-title="视频标题"></div>

id用于关联

data-fancybox用于默认激活fancybox，后面的video用于一个申明，如果我们要对视频的进行个性化设置可以自行调整属性名，然后手动激活fancybox。

div是一个容器，默认情况下最好是隐藏掉，所以class="video-none"是一个display:none的效果。

href和title则是一些基本要求，title可以没必要。

然后我发现fancybox默认是有padding的，找了半天没发现有js可以设置的地方，于是只能css自己改了。

.fancybox-content[data-dplayer] {
  padding: 0;
}

.video-none {
  display: none;
}

然后就是视频容器的大小了，我设置了一个max-width:100%；max-height:100%;

其他基本没啥，如果想要更好看一点，我们可能要手动设置一张图片，这个图片为视频的预览图，也就是缩略图吧，更好一点就是在搞点动态的播放的按钮效果。

这个元素作为触发弹窗视频的按钮即可。

具体懒得搞了，我只是尝试一下这种想法，顺带还改了下泽泽的typecho编辑器插件。

效果图