美文网首页
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