• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

fancybox 视频弹窗

127 0

刚了解了下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编辑器插件。

效果图

0
  • 本文分类:JavaScript
  • 本文标签:fancybox视频弹窗
  • 流行热度:已超过 127 人围观了本文
  • 最后更新:2020年05月9日 - 2时10分35秒
  • 发布日期:2020年05月9日 - 2时10分35秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码