设置视频水平垂直居中显示在页面上

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>无标题文档</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .index {
            height: 100%;
            position: relative;
            width: 100%;
        }

        .contain {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        video {
            display: block;
            min-height: 100%;
            min-width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    </head>

    <body>

        <div class="index">
            <div class="contain">
                <!-- muted 属性属于逻辑属性,当设置该属性后,它规定视频的音频输出应该被静音 -->
                <video autoplay="autoplay" loop="loop" muted="muted">
                    <source src="./top_bg.mp4" type="video/mp4">;
                </video>
            </div>
        </div>
    </body>
    <script>
    </script>

    </html>
posted @ 2019-11-14 16:01  执手听风吟  阅读(4950)  评论(0编辑  收藏  举报