参考代码

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

html

        <div class="s-video-all" >
            <!--VIDEO视频标签容器 -->
            <div class="s-video" :id=videoId>
                <!--把VIDEO视频标签初始化到这里 -->
            </div>
            <div class="s-full" title="点击全屏" @click="fullScreen">
                <el-icon class="el-icon el-icon-full-screen"></el-icon>
            </div>
        </div>

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