视频弹窗播放

小石爱学习

已于 2022-08-19 09:34:16 修改

阅读量522

点赞数

文章标签：前端 servlet html

于 2022-08-16 10:47:19 首次发布

本文链接：https://blog.csdn.net/qq_39164429/article/details/126361072

版权

本文介绍了如何在前端实现视频弹窗播放的功能。通过HTML的a标签结合fancybox库，设置data-fancybox属性，实现点击图片或链接后弹出视频全屏播放的效果。同时提及CSS代码在视觉呈现上的应用。

摘要由CSDN通过智能技术生成

鼠标点击，视频弹出播放

图片也可以用，点击图片，图片放大显示

<img data-fancybox data-width="800" src="img/zhengs.jpg" alt="" class="w100">

1、HTML代码

要引用fancybox.css 和 fancybox.umd.js

a 标签中 data-fancccybox

<link rel="stylesheet" href="css/fancybox.css">
<div class="index_six">
    <img src="img/sp-1.jpg" alt="" class="w100">
    <div class="content">
        <a data-fancybox data-width="800" data-height=""
            href="https://cloud-assets-brwq.oss-cn-heyuan.aliyuncs.com/caomeng0714/uploads/20220722/cb302bf4a64fb2e367cd6d6c83fb816e.mp4"
            class="spbf pa z">
            <i class="iconfo