插入视频背景一段简单的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. 消息驱动 —— SpringCloud Stream

    Stream 简介 Spring Cloud Stream 是用于构建消息驱动的微服务应用程序的框架,提供了多种中间件的合理配置 Spring Cloud Stream 包含以下核心概念: Desti ...

  2. BOM批量查询

     1业务要求 1.当多层展开时: 根据"BOM应用程序"字段CAPID在TC04中取出"选择ID"TC04-CSLID: 再根据TCS41-CSLID= TC0 ...

  3. 自用 IntelliJ IDEA Vim 插件配置

    Prefrence: https://einverne.github.io/post/2020/12/my-idea-vimrc-config.html https://gist.github.com ...

  4. JSP | out 对象详解

    原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 本篇学习自:C语言中文网,部分内容转载仅供学习使用. \[QAQ \] out 对象是一个输出流 ...

  5. 第五届蓝桥杯(2014)C/C++大学A组省赛题解

    第一题.猜年龄 小明带两个妹妹参加元宵灯会.别人问她们多大了,她们调皮地说:"我们俩的年龄之积是年龄之和的6倍".小明又补充说:"她们可不是双胞胎,年龄差肯定也不超过8岁 ...

  6. idea创建父子项目

    1. 首先创建大的project 父工程:  2. 点击下一步之后: 3. 点击下一步,填写项目存放地址,点击finish: 4. 完成之后删除不需要的文件,保留pom文件,检查对应的jar和spri ...

  7. redis管道技术pipeline一 ——api

    import java.io.UnsupportedEncodingException; import java.util.Set; import org.springframework.beans. ...

  8. rabbitMq消息持久化机制,和延时队列

    1.RabbitMQ的一大特色是消息的可靠性,那么它是如何保证消息可靠性的呢? 消息持久化.可以将Queue,Exchange,Message都设置为可持久化的.为了保证RabbitMQ在退出,服务重 ...

  9. 最全!即学即会 Serverless Devs 基础入门(上)

    作者 | 刘宇(花名:江昱) 在上篇<即学即会 Serverless | 如何解决 Serverless 应用开发部署的难题>中,我们阐述了工具链的重要性,那么本文将带领各位快速实现 Se ...

  10. tinymce富文本编辑器升级问题

    突然这样,之前好好地.