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 ...
随机推荐
- IFE第二天
HTML是超文本标记语言,HTML5是下一代的HTML标准. HTML元素是组成HTML文档的部分,HTML属性为HTML元素提供附加信息. 文档类型<!DOCTYPE>声明帮助浏览器正确 ...
- [2019.04.01]Linux 学习心得(2)-- tar 命令的理解
这篇文章并不是发布最早的但是阅读量却每天都见长,很想知道各位大大是怎么找到这篇文章的.如果不忙,还请各位大大评论一下我看看,没准我可以为大家改进一下本文,提升一下质量. =============== ...
- luogu4055 游戏 (二分图博弈)
考虑对非障碍的点黑白染色然后做二分图最大匹配,那么有结论,先手必胜当且仅当不是完美匹配,而且可以放的点是那些可以不匹配的点 从非匹配点开始走,后手只能走到匹配点,于是先手就可以走匹配边.由于不能走走过 ...
- [ZJOI2011]营救皮卡丘
题目描述 皮卡丘被火箭队用邪恶的计谋抢走了!这三个坏家伙还给小智留下了赤果果的挑衅!为了皮卡丘,也为了正义,小智和他的朋友们义不容辞的踏上了营救皮卡丘的道路. 火箭队一共有N个据点,据点之间存在M条双 ...
- jumpserver win终端无法添加
今天遇到一个问题是,guacd,tomcat部署完成以后jumpserver终端管理页里面还是只有coco的终端而没有guacd的终端
- 在centos 7 下安装 nginx
在Linux下安装 nginx 1下载对应当前系统版本的nginx包(package) wget http://nginx.org/packages/centos/7/noarch/RPMS/ngi ...
- (转) qt: usb热插拔(linux);
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <ctype.h> ...
- JavaEESpringMVC基础整理
1.什么是 SpringMVC ? 在介绍什么是 SpringMVC 之前,我们先看看 Spring 的基本架构.如下图: 我们可以看到,在 Spring 的基本架构中,红色圈起来的 Spring W ...
- flink-conf.yaml
Flink 配置文件 对于管理员来说,差不多经常调整的就只有 conf 下的flink-conf.yaml : 经过初步的调整,大约有以下模块的参数(未优化) Licensed to the Apac ...
- 内网环境上部署k8s+docker集群:集群ftp的yum源配置
接触docker已经有一年了,想把做的时候的一些知识分享给大家. 因为公司机房是内网环境无法连接外网,所以这里所有的部署都是基于内网环境进行的. 首先,需要通过ftp服务制作本地的yum源,可以从ht ...