插入视频背景一段简单的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. Solon 框架,maven 单月下载量突破 200 万了!

    Solon 是什么开源项目? 一个,Java 新的生态型应用开发框架.它从零开始构建,有自己的标准规范与开放生态(历时五年,已有全球第二级别的生态规模).与其他框架相比,它解决了两个重要的痛点:启动慢 ...

  2. Solon2 之基础:三、启动参数说明

    启动参数,在应用启动后会被静态化(为了内部更高效的利用).比如,想通过体外扩展加载配置,是不能改掉它们的. 1.启动参数 启动参数 对应的应用配置 描述 --env solon.env 环境(可用于内 ...

  3. 【设计模式】分享 Java 开发中常用到的设计模式(一)

    分享 Java 开发中常用到的设计模式(一) 前言 不知道大家在开发的时候,有没有想过(遇到)这些问题: 大家都是按需要开发,都是一个职级的同事,为什么有些人的思路就很清晰,代码也很整洁.易懂:而自己 ...

  4. 聊聊损失函数1. 噪声鲁棒损失函数简析 & 代码实现

    今天来聊聊非常规的损失函数.在常用的分类交叉熵,以及回归均方误差之外,针对训练样本可能存在的数据长尾,标签噪声,数据不均衡等问题,我们来聊聊适用不同场景有针对性的损失函数.第一章我们介绍,当标注标签存 ...

  5. AliPLC 智能丢包补偿算法,提升弱网环境的通话质量

    在线视频/语音通话逐渐成为人们日常生活的一部分,而复杂多变的网络环境会导致部分音频包无法传送到接收端,造成语音信号的短时中断或者卡顿,这会严重影响通话体验,为解决这类问题,阿里云视频云音频技术团队在综 ...

  6. P3574 [POI2014]FAR-FarmCraft (树形DP)

    这题直接贪心显然不可行. 考虑树形dp,用 \(f_i\) 表示到 \(i\) 人后,以 \(i\) 为根的所有人安装完的最短时间. 对于一个节点 \(u\), 假设拜访子节点的顺序为 \(v_1,v ...

  7. L3-002 特殊堆栈 (双数组模拟栈)

    堆栈是一种经典的后进先出的线性结构,相关的操作主要有"入栈"(在堆栈顶插入一个元素)和"出栈"(将栈顶元素返回并从堆栈中删除).本题要求你实现另一个附加的操作: ...

  8. TapTap 算法平台的 Serverless 探索之路

    分享人:陈欣昊,TapTap/IEM/AI平台负责人 摘要:本文主要介绍心动网络算法平台在Serverless上的实践. <TapTap算法平台的 Serverless 探索之路> Ser ...

  9. Serverless实战——2分钟,教你用Serverless每天给女朋友自动发土味情话

    原文链接:https://developer.aliyun.com/article/981268 演示视频:https://developer.aliyun.com/live/249772 一.Ser ...

  10. <vue 组件 3、父子组件相互访问>

    代码结构 一.     01-组件访问-父访问子 1. 效果 点击后在父组件里展示子组件的参数 2.代码 01-组件访问-父访问子.html <!DOCTYPE html> <htm ...