zoukankan      html  css  js  c++  java
  • 设置视频水平垂直居中显示在页面上

    <!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%;
                 100%;
            }

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

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

            video {
                display: block;
                min-height: 100%;
                min- 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>
  • 相关阅读:
    redis介绍
    多线程学习
    hashMap,hashTable,TreeMap,concurrentHashMap区别
    HashMap实现原理
    ArrayList,LinkedList,Vector区别.TreeSet,TreeSet,LinkedHashSet区别
    List与Set区别
    转:java身份证格式强校验
    RedisUtil: Jedis连接自动释放
    MySQL 相邻两条数据相减
    java 将byte[]转为各种进制的字符串
  • 原文地址:https://www.cnblogs.com/cyfeng/p/11857981.html
Copyright © 2011-2022 走看看