ElementUi视频背景

不多说，copy即可

rc.mp4:

链接：https://pan.baidu.com/s/1ku_-GbDkVYZCrAlhsY1obg 
提取码：shgp 

<template>
    <div style="text-align: center">
        <div class="homepage-hero-module">
            <div class="video-container">
                <div :style="fixStyle" class="filter" >
                    <div class="box" >
                        <!--此处填写代码-->
                        <el-form style="margin-top: 25%">
                            <el-form-item >
                                <el-input class="in1"  v-model="user.username" prefix-icon="el-icon-user-solid" placeholder="请输入姓名" size="large"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-input class="in2"  v-model="user.password" prefix-icon="el-icon-hot-water" placeholder="请输入密码" size="large"  show-password></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary"  v-on:click="login" round>登录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!--此处为视频,注意修改路径，也可放到video目录下-->
                <video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
                    <source src="../../video/rc.mp4" type="video/mp4"/>
                    <source src="../../video/rc.mp4" type="video/webm"/>
                </video>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "test",
        data() {
            return {
                vedioCanPlay: false,
                fixStyle: '',
                user:{
                    username:"",
                    password:""
                }
            }
        },
        methods: {
            login(){
                //此处做登录处理
            },
            canplay() {
                this.vedioCanPlay = true
            }
        },
        mounted: function() {   //屏幕自适应
            window.onresize = () => {
                const windowWidth = document.body.clientWidth
                const windowHeight = document.body.clientHeight
                const windowAspectRatio = windowHeight / windowWidth
                let videoWidth
                let videoHeight
                if (windowAspectRatio < 0.5625) {
                    videoWidth = windowWidth
                    videoHeight = videoWidth * 0.5625
                    this.fixStyle = {
                        height: windowWidth * 0.5625 + 'px',
                        width: windowWidth + 'px',
                        'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
                        'margin-left': 'initial'
                    }
                } else {
                    videoHeight = windowHeight
                    videoWidth = videoHeight / 0.5625
                    this.fixStyle = {
                        height: windowHeight + 'px',
                        width: windowHeight / 0.5625 + 'px',
                        'margin-left': (windowWidth - videoWidth) / 2 + 'px',
                        'margin-bottom': 'initial'
                    }
                }
            }
            window.onresize()
        }
    }
</script>


<style scoped>
    .homepage-hero-module,
    .video-container {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    .video-container .poster img{
        z-index: 0;
        position: absolute;
    }

    .video-container .filter {
        z-index: 1;
        position: absolute;
        background: rgba(0, 0, 0, 0);
        text-align: center;
        width: 100%;
    }

    .fillWidth {
        width: 200%;
    }
    .box{
        position: absolute;
        text-align: center;
        z-index: 100;
        width: 100%;
        height: 100%;
    }

    .in1{    /*s2是我的输入框class*/
        margin-top: 30px;    /*调整边距*/
        width: 380px;    /*调整整个组件的宽度*/

    }
    .in1>>>.el-input__inner{   /*或者 .s2>>>.el-input__inner  */
        background:rgba(0,0,0,0.2);    /*调整inner的背景色，透明*/
        height: 44px;    /*调整inner的高度*/
        border-radius: 22px;    /*输入框圆角值*/
        border-color: azure;

    }
    .in2{    /*s2是我的输入框class*/
        margin-top:10px;    /*调整边距*/
        width: 380px;    /*调整整个组件的宽度*/

    }
    .in2>>>.el-input__inner{   /*或者 .s2>>>.el-input__inner  */
        background:rgba(0,0,0,0.2);    /*调整inner的背景色，透明*/
        height: 44px;    /*调整inner的高度*/
        border-radius: 22px;    /*输入框圆角值*/
        border-color: azure;
    }
    .el-button{
        width: 200px;
    }
</style>

标签：视频,ElementUi,背景,px,height,width,inner,windowHeight,margin
来源： https://blog.csdn.net/weixin_52364578/article/details/117856088