项目中我打算使用一个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. ImageMagick 安装 window10与错误总结

    一般默认安装最新的版本(目前是7.0.8),但是通过测试发现这个版本会报错(ImportError: MagickWand shared library not found.)所以建议安装 im6版本 ...

  2. sips 命令(iMac 下系统自带)

    2. sips 2.1 -Z 指定最大宽高 //等比例缩放 scaleFill $ sips -Z 300 hgl.png $ for i in *.jpg;do sips -Z 300 " ...

  3. Gym - 101982B Coprime Integers (莫比乌斯反演)

    题目链接:http://codeforces.com/gym/101982/attachments 题目大意:有区间[a,b]和区间[c,d],求gcd(x,y)=1,其中x属于[a,b],y属于[c ...

  4. Java Socket、计算机网络

    一个服务器对应一个客户端 http://blog.51cto.com/wangdy/1588379 https://www.cnblogs.com/rocomp/p/4790340.html pack ...

  5. 大数据-hadoop生态之-HDFS

    一.HDFS初识 hdfs的概念: HDFS,它是一个文件系统,用于存储文件,通过目录树定位文件,其次,他是分布式的,由很多服务器联合起来 实现功能,集群中的服务器各有各自的角色 HDFS设计适合一次 ...

  6. 三、TensorFlow模型的保存和加载

    1.模型的保存: import tensorflow as tf v1 = tf.Variable(1.0,dtype=tf.float32) v2 = tf.Variable(2.0,dtype=t ...

  7. jenkins_jmeter配置

    echo "job begin" date export current_time=`date "+%Y%m%d_%H%M%S"` mkdir -p ${WOR ...

  8. I/O模型系列之二:Unix的五种网络I/O模型

    1. Unix的五种I/O模型 从上往下:阻塞程度(高-----低)I/O效率  (低-----高) 阻塞I/O(Blocking I/O):传统的IO模型 非阻塞I/O(Non-Blocking I ...

  9. 手机端开发,基础设置1-body-fontsize

    一.设计稿设计大小按照750设计. 二.单位使用rem,相对于body  fontsize 相对大小计算. 三.假设750下,body fontsize 为100,为了方便计算. 四.通过设置当前设备 ...

  10. ReactJS虚拟DOM效应带来的一则副作用探索

    疑问 https://github.com/ruanyf/react-demos/blob/master/demo08/index.html 在如下代码中的 18 行, 需要将本类中的 方法,进行绑定 ...