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 ...
随机推荐
- [数据库] windows server 2003下mysql出现10048错误的解决办法 Can't connect to MySQL server on '127.0.0.1' (10048)(抄)
网站访问量大了的时候mysql连接数自然就多了,当超出mysql最大连接数的时候就会出现错误,当出现too many字样的错误的时候一般是因为连接数的问题,只需要修改最大连接数max_conectio ...
- SpringBoot之常用注解
在spring boot中,摒弃了spring以往项目中大量繁琐的配置,遵循约定大于配置的原则,通过自身默认配置,极大的降低了项目搭建的复杂度.同样在spring boot中,大量注解的使用,使得代码 ...
- Going from u to v or from v to u? POJ - 2762(强连通 有向最长路径)
In order to make their sons brave, Jiajia and Wind take them to a big cave. The cave has n rooms, an ...
- mybatis-generator自动生成代码插件
mybatis自动生成代码(实体类.Dao接口等)是很成熟的了,就是使用mybatis-generator插件. 它是一个开源的插件,使用maven构建最好,可以很方便的执行 插件官方简介: http ...
- 查看Linux的所有线程
查看Linux所有线程有3种方法: ps -T <pid>可以看指定pid的所有线程,SPID就是指线程.或者用ps -eLf top -H,和普通的top命令相比,多了Thread ht ...
- python 2.x 与3.x 的区别总结
宏观上:2.x 源码不规范,混乱,冗余. 3.x 源码优美清晰,统一标准,去除了冗余. 默认编码方式:2.x ASCII码 3.x UTF-8 用2.x 处理中文时,需要声明编码方式(由于cmd ...
- Jenkins安装后无法安装插件
处理方法 Jenkins -- 管理插件 -- 高级 -- 升级站点 将URL 中的https 改为 http
- 第七周博客作业<西北师范大学|李晓婷>
1.助教博客链接:https://home.cnblogs.com/u/lxt-/ 2.本周应批作业0,实批作业0. 3.本周小结:本周我们助教开始准备团队项目题目,下周三之前将会进行作业提交.
- Linux基础知识梳理
Linux基础知识梳理 Linux内核最初只是由芬兰人林纳斯?托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的.Linux是一套免费使用和自由传播的类Unix操作系统,是 ...
- [转载]再谈PostgreSQL的膨胀和vacuum机制及最佳实践
本文转载自 www.postgres.cn 下的文章: 再谈PostgreSQL的膨胀和vacuum机制及最佳实践http://www.postgres.cn/news/viewone/1/390 还 ...