美文网首页
css将视频设置为pc端全屏背景

css将视频设置为pc端全屏背景

作者: momohi | 来源:发表于2019-10-23 16:39 被阅读0次

    html:

    <div class="videocontainer" >

             <video class="fullscreenvideo" src="static/mp4/fm.mp4"  autoplay ></video>

    </div>

    css:

    .videocontainer{   

        position: fixed;   

        width: 100%;   

        height: 100%;   

        overflow: hidden;   

        z-index: -100; 

    }

    .videocontainer:before{   

        content: "";   

        position: absolute;   

        width: 100%;   

        height: 100%;   

        display: block;   

        z-index: -1;   

        top: 0;   

        left: 0;   

    }

    .fullscreenvideo {   

        position: absolute;   

        top: 50%;   

        left: 50%;   

        min-width: 100%;   

        min-height: 100%;   

        width: auto;   

        height: auto;   

        z-index: -100;   

        -webkit-transform: translateX(-50%) translateY(-50%);   

        transform: translateX(-50%) translateY(-50%);   

        -webkit-transition: 1s opacity;   

        transition: 1s opacity;

    }

    相关文章

      网友评论

          本文标题:css将视频设置为pc端全屏背景

          本文链接:https://www.haomeiwen.com/subject/oipkvctx.html