video作为背景全屏铺满问题
项目中我打算使用一个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作为背景全屏铺满问题的更多相关文章
- android设置GridView高度自适应,实现全屏铺满效果
使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...
- video自动全屏播放
video自动全屏播放 关于Screen.lockOrientation() https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockO ...
- 微信video标签全屏无法退出bug 本文系转载
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- 微信video标签全屏无法退出bug
安卓(android)微信里面video播放视频,会被强制全屏,播放完毕后还有腾讯推荐的视频,非常讨厌..强制被全屏无法解决,但是视频播放完毕后退出播放器可以解决.方法就是视频播放完毕后,用音频aud ...
- X5内核浏览器video自动全屏解决办法-canvas
最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...
- 防止微信浏览器video标签全屏的问题
在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID" webkit-play ...
- iframe中video没有全屏按钮
HTML内联框架元素 <iframe> iframe默认不允许全屏, 如果内嵌了video那么控制条上将不显示全屏按钮, 通过添加allowfullscreen属性可以开启全屏功能. mo ...
- video 手机全屏自动播放
<video src="video.mp4" id="video" x-webkit-airplay="true" webkit-pl ...
- Android 使WebView支持HTML5 Video(全屏)播放的方法
http://blog.csdn.net/zrzlj/article/details/8050633 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAcceler ...
随机推荐
- CENTOS手动安装修复python ,YUM
CENTOS手动安装修复YUM
CENTOS手动安装修复YUM 2019年3月8日 杨宇 Comments 0 Comment 目录 [hide] 一.问题场景 二.手动修复 2.1 下载 rpm 包 2.2 安装 rpm 包 ...
- [USACO19FEB]Mowing Mischief
题目大意: 给定平面上的一些点,求这些点的一个\(LIS\),并且还需要满足下列式子最小: \[ \sum_{i=1}^{n-1}(a[i+1].x-a[i].x)*(a[i+1].y-a[i].y) ...
- JDK源码分析(8) StringBuffer & StringBuilder
简介 StringBuffer与StringBuilder是两个常用的操作字符串的类.大家都知道,StringBuilder是线程不安全的,而StringBuffer是线程安全的.前者是JDK1.5加 ...
- CF1157A-Reachable Numbers题解
原题地址 题目大意:有一个函数\(f(x)\),效果是将\(x+1\)后,去掉末尾所有的\(0\),例如: \(f(599)=6\),因为\(599+1=600→60→6\) \(f(7)=8\),因 ...
- [CTSC2017]网络
[CTSC2017]网络 连一条长度为len的边,使得基环树的直径最小 结论:一定连在某条直径两个点上(否则更靠近不劣) 然后二分答案判定. dp[i]:链上一个点往下延伸的最大深度 考虑对于任意两个 ...
- mac下安装maven
在mac下 使用 brew安装,brew install maven 查看maven版本 mvn -version 打开Terminal,输入以下命令,设置Maven classpath 添加下列两行 ...
- Python3下POST请求HTTPS链接
Python 3.5.2 + Windows 7环境下 第一种:http.client方式 def http_client_post(): conn = http.client.HTTPSConnec ...
- JavaEEspring整理
Spring框架—控制反转(IOC) 1 Spring框架概述 1.1 什么是Spring 1.2 S ...
- 数据结构与算法之美学习笔记:B+树(第48讲)
一.解决问题的前提是定义清楚问题 通过对一些模糊需求进行假设,来限定要解决问题的范围 根据某个值查找数据,比如 select * from use where id=1234: 根据区间值来查询某些数 ...
- uCos-II移值(一)
os_cpu.h文件 该文件主要是完成操作系统使用的内部数据类型.常数以及宏的定义,这些都是与处理器平台密切相关的: 第一部分 以下部分定义了系统内部常用的数据类型,为了增加系统的可移植性,系统内核只 ...