JQPlug0004:layer 打开 type 1 弹出视频 弹出链接

1,

        /* 设置layer背景透明 */
        .shadows{background-color: transparent !important;box-shadow: 0 0 0 rgba(0,0,0,0) !important;}

确保弹窗视频上下居中

    vcr = "hotdemo/video/video/aboutesun.mp4";
    vidwid = document.body.offsetWidth * 0.7 + "px";
    // 视频居中的上偏移百分比
    offhig = ((1 - ((document.body.offsetWidth * 0.7 * 0.56) / document.body.offsetHeight))/2)*100;
    layer.open({
        type: 1,
        title: false,
        closeBtn: 1, //显示关闭按钮
        shade: 0.7,
        border: 0,
        skin: 'shadows',
        // area: ['658px', '356px'], //会出现滚动条
        area: vidwid, // 这样写area可以确保不会出现滚动条
        anim: 0,
        scrollbar: false, //防止父页面自动跳到页面顶端
        offset: '' + offhig + '%', // 上下偏移
        // 播放视频
        content: '<div style="line-height:0; overflow: hidden;"><video id="vidsen1hot1" width="100%" height="100%" controlsList="nodownload" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="100%;height:100%;"></video></div>'
        // 打开链接
        // content: '<iframe name="IF0" id="IF0" class="IF0" src="hotdemo/zhiboImg/index.html" width="100%" height="' + vidhig + '" scrolling="no" frameborder="no" allowtransparency="yes" security="restricted" sandbox="allow-top-navigation allow-same-origin allow-forms allow-popups allow-scripts"></iframe>'
    });
    // content 中 div标签中 line-height:0; 可以去掉视频底部的白边
    //去掉视频播放工具栏中的下载全屏等功能 controlslist="nodownload  nofullscreen noremoteplayback"
    //去掉默认视频播放栏中的 画中画 功能
    $('#vidsen1hot1')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true
    vcr = "https://www.esun3dai.com/Test/maotai.mp4";
    vidwid = document.body.offsetWidth * 0.8 + "px";
    vidhig = document.body.offsetWidth * 0.8 * 0.55 + "px";
    layer.open({
        type: 1,
        title: false,
        closeBtn: 1, //显示关闭按钮
        shade: 0.7,
        border: 0,
        skin: 'shadows',
        // area: ['658px', '356px'], //会出现滚动条
        area: vidwid, // 这样写area可以确保不会出现滚动条
        anim: 0,
        scrollbar: false, //防止父页面自动跳到页面顶端
        // 播放视频
        // content: '<div style="line-height:0;"><video id="vid1" width="100%" height="100%" controlsList="nodownload" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop" src="' + vcr + '" style="100%;height:100%;"></video></div>'
        // 打开链接
        content: '<iframe name="IF0" id="IF0" class="IF0" src="hotdemo/zhiboImg/index.html" width="100%" height="' + vidhig + '" scrolling="no" frameborder="no" allowtransparency="yes" security="restricted" sandbox="allow-top-navigation allow-same-origin allow-forms allow-popups allow-scripts"></iframe>'
    });

    // content 中 div标签中 line-height:0; 可以去掉视频底部的白边
    //去掉视频播放工具栏中的下载全屏等功能 controlslist="nodownload  nofullscreen noremoteplayback"
    //去掉默认视频播放栏中的 画中画 功能
    // $('#vid1')[0]['disablePictureInPicture'] = true; //disablePictureInPicture的属性改为true
琥珀君的博客
原文地址:https://www.cnblogs.com/eliteboy/p/13932881.html