HTML中加入视频播放及调节视频大小位置等比例那些事

2023-09-11 19:09| 来源: 网络整理| 查看: 265

需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，

HTML中加入视频很简单加一个即可

现在要设置视频为背景，上层还有图片、文字、等；

视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果

比如：

这时视频width和weight设置为100%，已经到达视频原有的最大尺寸，但是还无法完全覆盖我们的div，所以现在要设置视频Video的属性和其父级DIV的属性：

.video_back { /*设置视频最小宽度和高度这个设不设置没有什么影响 */ /*min-width: 100%; min-height:100%;*/ /**/ width: 100% !important; height: 100%; /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/ position: absolute; /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/ left: 0; top: 0; /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/ z-index: -9999; /*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/ object-fit: fill; } #parent{ position:absolute; }

几个重要的设置：

视频样式中的：position:absolute；这是让视频相对于父级div生成绝对定位；z-index：-9999；这是让视频在堆叠顺序的最底层，作为背景；object-fit：fill；视频完全填充到div中的关键！！！！父级设置样式position:absolute 生成相对定位的元素，相对于其正常位置进行定位。

视频其他小属性

muted 静音播放autoplay=autoplay；打开时自动播放；loop=loop；循环播放constrol 不显示视频播放框

最终效果：

源代码：

视频背景网页 .video_back { /*设置视频最小宽度和高度*/ /*min-width: 100%; min-height:100%;*/ /**/ width: 100% !important; height: 100%; /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/ position: absolute; /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/ left: 0; top: 0; /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/ z-index: -9999; /*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/ object-fit: fill; } #parent{ position:absolute; } .wen { font-size: 30px; color: #fff; } 您的浏览器不支持这是视频的上浮文字

【本文地址】

公司简介

联系我们