首页 > 其他分享 >html5中 MP4当作背景视频居中显示

html5中 MP4当作背景视频居中显示

时间:2024-12-05 17:43:31浏览次数:5  
标签:居中 none 100% object width MP4 important html5 background

 .video-background {
     max-width: none !important;
     border: none;
     object-fit: cover;
     background-size: cover;
     opacity: 1;
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0px;
     top: 0%;
     display: block;
     object-position: center bottom !important;
     z-index:-1;
 }

 

<video autoplay="autoplay" loop="loop" muted="muted" class="video-background">
<source src="/video/1_1.mp4" type="video/mp4" style="object-fit: cover;position: absolute;top: 0;left: 0;">
Your browser does not support the video tag.
</video>

 

 .video-background {     max-width: none !important;     border: none;     object-fit: cover;     background-size: cover;     opacity: 1;     width: 100%;     height: 100%;     position: absolute;     left: 0px;     top: 0%;     display: block;     object-position: center bottom !important;     z-index:-1; }

标签:居中,none,100%,object,width,MP4,important,html5,background
From: https://www.cnblogs.com/huaan011/p/18589064

相关文章

  • 说说html5手势检测原理是什么?
    HTML5本身并不直接提供“手势检测”这一高级API。它提供的是更底层的触摸事件(TouchEvents),开发者需要基于这些底层事件自行实现手势识别。手势,例如缩放(pinch)、旋转(rotate)、滑动(swipe)等,都是由一系列连续的触摸事件组成的。HTML5触摸事件主要包括:touchstart:手指触摸屏幕时......
  • 实现一个居中半透明的模态窗
    <!DOCTYPEhtml><html><head><title>ModalExample</title><style>body{font-family:sans-serif;}.modal{display:none;/*Hiddenbydefault*/position:fixed;/*Stayinplace*/z-index:1;/*Sitonto......
  • 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
    在固定高度的容器中,让不固定宽高的元素水平垂直居中,有很多方法,以下是几种常见且有效的方法:1.Flexbox布局(推荐)这是现代CSS中最简洁和灵活的解决方案。.container{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/......
  • HTML5期末考核大作业,个人网站—— 程序员个人简历模板下载HTML+CSS+JavaScript (2)
    ......
  • HTML5+CSS3+JS制作响应式旅游网站(源码含7个页面)
    一、网站描述主要使用HTML5+CSS3+JS技术,进行制作响应式旅游网站,该网站包含7个静态页面,分别是目的地、旅游攻略、特色行程、酒店预订、联系我们、注册页面、登录页面。其中,该旅游网站的官网首页,包含吸引眼球的主要横幅、导航菜单、推荐景点栏以及用户评价部分。页面整体以直观......
  • 305.大学生HTML5期末大作业 —【摩尔庄园小游戏主题网页】 Web前端网页制作 html5+css
    目录一、更多推荐二、网页简介三、网页文件四、网页效果五、代码展示1.html2.CSS3.JS六、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强一、更多推荐欢迎来到我的CSDN主页!您的支持是我创作的动力!Web前端网页制作、网页完整代码、大学生期末大作......
  • 基于Java+SSM+HTML5音乐播放器系统(源码+LW+调试文档+讲解等)/音乐播放器/音乐播放系
    博主介绍......
  • 如何使用html5进行图片压缩上传?
    HTML5本身并不能直接压缩图片。你需要结合JavaScript来实现图片压缩上传。以下列出几种常用的方法:1.使用canvas元素:这是最常用的前端图片压缩方法。基本思路是将图片绘制到canvas上,然后使用canvas.toDataURL()方法导出压缩后的图片数据。functioncompressImage(im......
  • 你知道什么是html5plus吗?
    HTML5Plus(简称H5+)是一个扩展的HTML5规范,由DCloud(数字天堂)推出,主要用于跨平台移动应用开发。它在标准HTML5的基础上增加了大量的JavaScriptAPI,使得开发者可以使用JavaScript调用原生设备能力,例如:访问设备硬件:地理位置、摄像头、麦克风、加速度传感器、陀螺仪等......
  • 在普通网页中如何调用html5+的plus对象?
    在普通网页中无法直接调用HTML5+的plus对象。plus对象是5+Runtime提供的,只能在5+App或uni-app项目中使用。普通网页运行在浏览器环境中,不具备5+Runtime的能力。如果你想在普通网页中使用类似plus对象提供的原生能力,你需要考虑以下几种方案:使用浏览器提供的......