项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可);

后又发现视频没办法铺满全屏,在不同的分辨率下会往左上角缩回来,而且还有滚动条。不像背景图片可以直接使用background-size:cover;即可搞定 ,于是百度一圈发现直接给video定位,宽高设置为自动的即可。具体代码如下所示:

  video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}

其他网友说使用 object-fit:fill;属性;也有说计算出video父级的高度和video本身的高度,再通过计算得出padding-bottom的值来,我试了没效果,使用上面的代码简单粗暴的解决了问题。

video作为背景全屏铺满问题的更多相关文章

  1. android设置GridView高度自适应,实现全屏铺满效果

    使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...

  2. video自动全屏播放

    video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...

  3. 微信video标签全屏无法退出bug 本文系转载

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  4. 微信video标签全屏无法退出bug

    安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...

  5. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

  6. 防止微信浏览器video标签全屏的问题

    在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...

  7. iframe中video没有全屏按钮

    HTML内联框架元素 <iframe> iframe默认不允许全屏, 如果内嵌了video那么控制条上将不显示全屏按钮, 通过添加allowfullscreen属性可以开启全屏功能. mo ...

  8. video 手机全屏自动播放

    <video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...

  9. Android 使WebView支持HTML5 Video(全屏)播放的方法

    http://blog.csdn.net/zrzlj/article/details/8050633  1)需要在AndroidManifest.xml文件中声明需要使用HardwareAcceler ...

随机推荐

  1. UNION的使用方法 (表与表直接数据和在一起的示例)

    SELECT o.CATEGORY CATEGORY,o.KEY_WORK KEY_WORK FROM BO_EU_KEY_WORK wo RIGHT OUTER JOIN BO_EU_WORK_ON ...

  2. python学习日记(常用模块)

    模块概念 什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代 ...

  3. python自动启动appium服务

    我们可以通过socket模块来检查appium是否启动,如果未启动,可以通过subprocess模块来启动,需要导入socket和subprocess模块,具体如下图: 第1个函数:表示检查appiu ...

  4. Shell脚本统计文件行数

    Shell脚本统计文件行数 转自 http://www.jb51.net/article/61943.htm    示例:row_count.sh文件 awk '{print NR}' row_cou ...

  5. ArcGis Python脚本——将细碎小面合并到相邻的面积最大的面

    参数: polygon_fc 面要素类 area_limit 给定面积值,小于它的面会被合并 给定两个参数即可,这回没有注释. #polygon_fc 面要素类 #area_limit 给定面积值,小 ...

  6. VMware 安装虚拟机系统

    Ø  简介 本文主要介绍使用 VMware 安装虚拟机系统. 1.   创建虚拟机 1)   打开VMware,创建新虚拟机 2)   选择需要安装系统的iso镜像文件 3)   选择需要安装的Win ...

  7. [译]Ocelot - Rate Limiting

    原文 Ocelot支持对上游做访问限流,这样就可以保证下游不要负载太大了. 如果要启用访问限流,需要做如下配置: "RateLimitOptions": { "Clien ...

  8. c\c++里struct字节对齐规则

    规则一.: 每个成员变量在其结构体内的偏移量都是成员变量类型的大小的倍数.   规则二: 如果有嵌套结构体,那么内嵌结构体的第一个成员变量在外结构体中的偏移量,是内嵌结构体中那个数据类型大小最大的成员 ...

  9. 程序到CPU的路径

    汇编 源码->编译->CPU C/C++ 源码->编译->机器码->系统(执行)->CPU Java/.NET 源码->编译->J字节码->虚拟机 ...

  10. springboot 共享session

    1.pom添加jar依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...