插入视频背景一段简单的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. Neo4j Neo.TransientError.General.MemoryPoolOutOfMemoryError

    The allocation of an extra 4.0 MiB would use more than the limit 2.0 GiB. Currently using 2.0 GiB. d ...

  2. SocketChannel支持设定参数

    SocketChannel支持设定参数SO_SNDBUF 套接字发送缓冲区大小SO_RCVBUF 套接字接收缓冲区大小SO_KEEPALIVE 保护连接O_REUSEADDR 复用地址SO_LINGE ...

  3. SpringBoot 自定义初始化任务 Runner

    在项目启动的时候需要做一些初始化的操作,比如初始化线程池,提前加载好加密证书等.可以通过实现Runner接口完成以上工作. 两者只是参数上的区别 方式一 实现 CommandLineRunner 接口 ...

  4. Prometheus--PromQL

    官方文档:https://prometheus.io/docs/introduction/overview/  中文文档:https://prometheus.fuckcloudnative.io/ ...

  5. JS 闭包 BUG

    C.js代码: /** * 有BUG */ (function (global) { var _id; var _map; var _length; global.C = function () { ...

  6. 0x53 动态规划-区间DP

    A: 石子合并 所求问题:1到n这些石子合并最少需要多少代价 由于石子合并的顺序可以任意,我们将石子分为两个部分 子问题:1到k这堆石子合并,k+1到n这堆石子合并,再把两堆石子合并,需要多少代价\( ...

  7. vue 使用print.js实现前端打印功能

    https://blog.csdn.net/cccdf_jjj/article/details/99563682 插件vue-print-nb实现前端打印当前页面功能 https://blog.csd ...

  8. [QML]从零开始QML开发(二)QML开发,浅谈控件、槽函数、锚等基本概念。QML和C++怎么交互?贯彻落实MVC原则

    [QML]从零开始QML开发(二)QML开发,浅谈控件.槽函数.锚等基本概念.QML和C++怎么交互?贯彻落实MVC原则 先看代码: import QtQuick 2.12 import QtQuic ...

  9. 凸优化 | Lagrange 对偶:极大极小不等式的证明

    背景: Lagrange 对偶:对于优化问题 \[\begin{aligned} &\mathrm{minimize} ~~ &f_0(x) \\ &\mathrm{subje ...

  10. printf 函数格式控制

    Printf()介绍 printf()是C语言标准库函数,用于将格式化后的字符串输出到标准输出.标准输出,即标准输出文件,对应终端的屏幕.printf()申明于头文件stdio.h. 函数原型: in ...