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 ...
随机推荐
- ImageMagick 安装 window10与错误总结
一般默认安装最新的版本(目前是7.0.8),但是通过测试发现这个版本会报错(ImportError: MagickWand shared library not found.)所以建议安装 im6版本 ...
- sips 命令(iMac 下系统自带)
2. sips 2.1 -Z 指定最大宽高 //等比例缩放 scaleFill $ sips -Z 300 hgl.png $ for i in *.jpg;do sips -Z 300 " ...
- Gym - 101982B Coprime Integers (莫比乌斯反演)
题目链接:http://codeforces.com/gym/101982/attachments 题目大意:有区间[a,b]和区间[c,d],求gcd(x,y)=1,其中x属于[a,b],y属于[c ...
- Java Socket、计算机网络
一个服务器对应一个客户端 http://blog.51cto.com/wangdy/1588379 https://www.cnblogs.com/rocomp/p/4790340.html pack ...
- 大数据-hadoop生态之-HDFS
一.HDFS初识 hdfs的概念: HDFS,它是一个文件系统,用于存储文件,通过目录树定位文件,其次,他是分布式的,由很多服务器联合起来 实现功能,集群中的服务器各有各自的角色 HDFS设计适合一次 ...
- 三、TensorFlow模型的保存和加载
1.模型的保存: import tensorflow as tf v1 = tf.Variable(1.0,dtype=tf.float32) v2 = tf.Variable(2.0,dtype=t ...
- jenkins_jmeter配置
echo "job begin" date export current_time=`date "+%Y%m%d_%H%M%S"` mkdir -p ${WOR ...
- I/O模型系列之二:Unix的五种网络I/O模型
1. Unix的五种I/O模型 从上往下:阻塞程度(高-----低)I/O效率 (低-----高) 阻塞I/O(Blocking I/O):传统的IO模型 非阻塞I/O(Non-Blocking I ...
- 手机端开发,基础设置1-body-fontsize
一.设计稿设计大小按照750设计. 二.单位使用rem,相对于body fontsize 相对大小计算. 三.假设750下,body fontsize 为100,为了方便计算. 四.通过设置当前设备 ...
- ReactJS虚拟DOM效应带来的一则副作用探索
疑问 https://github.com/ruanyf/react-demos/blob/master/demo08/index.html 在如下代码中的 18 行, 需要将本类中的 方法,进行绑定 ...