项目中我打算使用一个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. 【12】Django 中间件

     前戏 我们在前面的课程中已经学会了给视图函数加装饰器来判断是用户是否登录,把没有登录的用户请求跳转到登录页面.我们通过给几个特定视图函数加装饰器实现了这个需求.但是以后添加的视图函数可能也需要加上装 ...

  2. pdfplumber库解析pdf格式

    参考地址:https://github.com/jsvine/pdfplumber 简单的pdf转换文本: import pdfplumber with pdfplumber.open(path) a ...

  3. 【LOJ#2402】[THUPC2017]天天爱射击(整体二分)

    [LOJ#2402][THUPC2017]天天爱射击(整体二分) 题面 LOJ 题解 显然对于每块木板可以二分被打烂的时间. 那么直接上整体二分处理就行了. #include<iostream& ...

  4. Spring Boot学习总结三

    1,mybatis在spring boot下的2种使用模式 无配置文件注解版 application.properties添加相关配置 mybatis.type-aliases-package=com ...

  5. CentOS安装glibc-2.14

    CentOS安装glibc-2.14   到http://ftp.gnu.org/gnu/glibc/下载glibc-2.14.tar.gz wget https://ftp.gnu.org/gnu/ ...

  6. (四) 虚拟摄像头vivi体验

    目录 虚拟摄像头vivi体验 源码下载 修改Makefile 安装xawtv 测试体验 title: 虚拟摄像头vivi体验 date: 2019/4/23 19:20:00 toc: true -- ...

  7. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  8. Python高级笔记(三) -- 私有化

    1. 类型1 2. 多模块开发 2.1 import 2.2 from xxx import MyName 区分 import xxx ==> xxx.MyName 可以修改 from xxx ...

  9. 【Unity】透明度渐变

    写给美术大佬的脚本,还要继续改,github地址:TransEffect[github] 效果图如下: Ver.1源码,针对3d Object: using System.Collections; u ...

  10. linux Centos7下安装python3及pip3

    先去python官网下载python3安装包 执行命令:wget https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 安装zlib-dev ...