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>
  • 相关阅读:
    Linux上Nginx部署配置--二级域名配置
    Android-Gallery GridView ImageSwitcher 使用
    Android:控件布局(相对布局)RelativeLayout(转)
    Win10 安装msi 提示2502、2503的错误代码 -- 命令提示符(管理员) -- msiexec /package
    storm 入门原理介绍_AboutYUN
    storm入门教程 第一章 前言
    Hbase存储详解
    浅谈设计模式
    Hadoop分布式文件系统--HDFS结构分析
    YARN源码分析(一)-----ApplicationMaster
  • 原文地址:https://www.cnblogs.com/cyfeng/p/11857981.html
Copyright © 2011-2022 走看看