让div内容在video视频上显示

参考代码

业务场景:在video标签上面添加一个全屏图标

html

        

css

    .s-video-all {
        width: 100%;
        position: relative;
    }
    
    .s-full {
        position: absolute;
        right: 10px;
        bottom: 20px;
        
        width: 40px;
        color: white;
        padding-right: 10px;
        font-size: 20px;
        cursor: pointer;
    }

PS

如果需要vidEO全屏,可参考如下js函数

            fullScreen() {
                const ele = document.getElementById(this.videoId);
                //只在播放视频时全屏生效
                if (ele.innerHTML) {
                    if (ele.requestFullscreen) {
                        ele.requestFullscreen();
                    } else if (ele.mozRequestFullScreen) {
                        ele.mozRequestFullScreen();
                    } else if (ele.webkitRequestFullScreen) {
                        ele.webkitRequestFullScreen();
                    }
                }
            }

参考代码

HTML5 video 进入全屏和退出全屏 CSDN Eighteen Z

你可能感兴趣的:(CSS)