插入视频背景一段简单的css即可

首先定义HTML的video标签

<video src="视频路径" class="bjimg" autoplay loop muted></video>

其次加入css代码引用或者直接插入都可以

   .bjimg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover; }

object-fit: cover; 保持原有尺寸比例。但部分内容可能被剪切。


当然也可以加入浏览器兼容代码如下

		.bjimg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
object-fit: cover;
/*兼容浏览器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

HTMl插入视频背景的更多相关文章

  1. C#/VB.NET 向PowerPoint文档插入视频

    如今,Microsoft Office PowerPoint在我们日常生活中的应用已经很广泛了,利用Microsoft Office PowerPoint不仅可以创建演示文稿,还可以在互联网上召开面对 ...

  2. 将视频插入视频:CVPR2019论文解析

    将视频插入视频:CVPR2019论文解析 Inserting Videos into Videos 论文链接: http://openaccess.thecvf.com/content_CVPR_20 ...

  3. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  4. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  5. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  6. 博客用Markdown编辑器插入视频

    要展示一些App的效果用或者更方便地展示工具的操作,可以使用视频. 以下有两种方式可以在博客中插入视频 第一种 此方法适用于插入来源优酷的视频或者你自己录制了视频上传到优酷,这种方法的好处是可以插入时 ...

  7. UEditor插入视频,Object Iframe等标签被过滤问题处理

    UEditor插入视频由于兼容性问题,需要再处理一个视频代码,但是新版ueditor不支持Objec IFrame标签,所以要加入// xss过滤白名单 名单来源: https://raw.githu ...

  8. kindeditor自定义插件插入视频代码

    kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...

  9. 借用HTML5 插入视频。音频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 插入视频 <video width="320" height="240" contro ...

  10. html视频背景

    视频作为网页背景的限制因素 在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚: 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很 ...

随机推荐

  1. 直播实时数仓基于DataLeap开放平台在发布管控场景的业务实践

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景 业务背景 随着字节业务的高速增长,业务场景越来越丰富,业务基于数据做的决策也越来越多,对数据的时效性要求也越 ...

  2. PPT 动画-旋转唱片

    插入图片.同心圆 按Shift 先点击背景图片,再点击 同心圆 合并形状,选择相交 设置动画,选择 陀螺旋,持续时间为 8秒, 打开计时窗口,重复为:直到幻灯片末尾

  3. Web 3.0 会是互联网的下一个时代吗?

    2000 年初,只读互联网 Web 1.0 被 Web 2.0 所取代.在 Web 2.0 时代,用户摆脱了只读的困扰,可以在平台上进行互动并创作内容.而 Web 3.0 的到来,除了加密货币和区块链 ...

  4. 服务器上TIME_WAIT过多怎么处理

    正常情况下,TIME_WAIT是需要存在的 为了保证客户端发送的最后一个ACK报文能够到达服务器,因为这个ACK可能丢失,从而导致处在LAST-ACK状态的服务器收不到对FIN-ACK的确认报文,服务 ...

  5. 【JAVA基础】时间处理

    #时间处理 ##查询前台报表运单数据集 @ApiOperation(value = "查询前台报表运单数据集") @Permission(permissionPublic = tr ...

  6. Cursor,程序员的 AI 代码编辑助手

    相信大家都或多或少地听说过.了解过 chatGPT ,半个月前发布的 GPT-4 ,可谓是 AI 赛道上的一个王炸 那么今天咸鱼给大家分享一个开源的 AI 代码编辑器--Cursor,让各位程序员在编 ...

  7. 【内核】深入分析内核panic(二)--内核中的少林扫地僧-NMI Watchdog Timer

    没有完美的代码 没有完美的人,更没有完美的代码.虽然教科书上说deadlock(死锁)多么不好不好,但是在现实生活中,很难把它完全消灭.假设不小心内核出现了deadlock,可能你得干瞪眼.CPU就在 ...

  8. P4913【橙】

    蕾姆了,上一道题做的好烦,结果直接把上一题的代码稍微改改就直接五分钟做出了另一道题,就是这道橙题.虽然只是一道橙题,但上一题代码得以复用显得自己没浪费那么多时间,显得自己还是有不少收获的.心里平摊多了 ...

  9. 每天学五分钟 Liunx 0101 | 服务篇:创建进程

    创建子进程 上一节说过创建子进程的三种方式: 1. fork 复制进程:fork 会复制当前进程的副本,产生一个新的子进程,父子进程是完全独立的两个进程,他们掌握的资源(环境变量和普通变量)是一样的. ...

  10. i-MES生产制造管理系统-生产过程检验SPC(一)

    说起质量管理,那一定少不了 SPC,SPC中文名叫统计过程控制,对生产过程中记录的数据进行分析,及时了解不良情况出现的几率,并采取必要的措施达到消除影响的目的,这其中有几个关键术语,比如 UCL等. ...