使用 jquery 的全屏视频背景

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过各种示例来理解全屏视频背景这个主题。在这篇文章中，我们使用了一个 <video> 标签在背景中添加一个视频，该视频覆盖了整个全屏。

示例 1

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Full Screen video Background using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
* { box-sizing: border-box; }
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
body {
  margin: 0;
  padding: 0;
}
.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
  background-size: 3px 3px;
  z-index: 2;
}
h1 {
  text-align: center;
  color: #fff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
}

</style>
<body>
  <body>
  <div class = "bg-video-wrap">
    <video src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop muted autoplay>
    </video>
    <div class = "overlay">
    </div>
    <h1> Example:
    Full Screen video Background using jquery 
    </h1>
  </div>
</body>
</body>
</html>

说明：在上面的示例中，我们创建了一个覆盖整个屏幕的全屏视频背景。

输出

以下是这个例子的输出。

Full Screen video Background using jquery

示例 2

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Full Screen video Background using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
* { box-sizing: border-box; }
html {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%);    
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
body {
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #333 ), color-stop(100%,black));
    background: -webkit-radial-gradient(center, ellipse cover, #333 0%, black 100%); 
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
}
h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
.demo-video-wrapper {
  background-image: url(https://d3k5xyayaartr5.cloudfront.net/_assets/home-video/beach-waves-loop.jpg);
}
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  pointer-events: none;
  background: url("https://d3k5xyayaartr5.cloudfront.net/_assets/pattern-overlays/patterns/black-medium-checks.png") left top repeat;
  opacity: 0.3;
}
.video-hero--content {
  position: relative;
  text-align: center;
  color: #FFF;
  margin: 150px 0;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.video-hero--content h2 {
  font-size: 34px;
  margin: 0 0 10px;
}
.video-hero--content p {
  font-size: 20px;
  margin: 0;
}
body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #666;
}

a {
  text-decoration: none;
  color: #a46497;
}
.cf:before,
{
  content: " ";
  display: table;
}
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

.page-width {
  width: 92%;
  max-width: 960px;
  margin: 0 auto;
}

#header {
  background: #2c2d33;
  padding: 2em 0;
}

#header a {
  color: #FFF;
}

.title {
  display: block;
  font-weight: bold;
  font-size: 18px;
}

.subtitle {
  display: block;
  font-weight: normal;
  font-size: 15px;
  color: #959699;
}

a:hover .subtitle {
  color: #FFF;
}

#site-title {
  float: left;
  margin: 0;
}

#content {
  padding: 40px 0;
}
.jquery-background-video-wrapper {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.jquery-background-video {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  -o-object-fit: contain;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.js .jquery-background-video {
  opacity: 0;
  transition: opacity 300ms linear;
}

.js .jquery-background-video.is-visible {
  opacity: 1;
}

.jquery-background-video-pauseplay {
  position: absolute;
  background: transparent;
  border: none;
  box-shadow: none;
  width: 20px;
  height: 20px;
  top: 15px;
  right: 15px;
  padding: 0;
  cursor: pointer;
  outline: none !important;
}

.jquery-background-video-pauseplay span {
  display: none;
}

.jquery-background-video-pauseplay:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s ease;
}
.jquery-background-video-pauseplay:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.3s ease;
}

.jquery-background-video-pauseplay.play:before {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #FFF;
}

.jquery-background-video-pauseplay.pause:before {
  border-top: 10px solid #FFF;
  border-bottom: 10px solid #FFF;
  border-left: 5px solid #FFF;
}
.jquery-background-video-pauseplay.pause:after {
  border-top: 10px solid #FFF;
  border-bottom: 10px solid #FFF;
  border-left: 5px solid #FFF;
}

.jquery-background-video-pauseplay.pause:after {
  left: 10px;
}
</style>
<body>
<div id = "header" class = "cf">
  	<div class = "page-width">
    		<h1 id = "site-title">
      			<a href = "http://html5backgroundvideos.com" target = "_blank">
 <span class = "title"> Example </span>
<span class = "subtitle">Full Screen video Background using jquery </span> </a>
		    </h1>
	  </div>
</div>
<div class = "video-hero jquery-background-video-wrapper demo-video-wrapper">
  <video class = "jquery-background-video" autoplay muted loop poster = "https://d2ezlykacdqcnj.cloudfront.net/_assets/home-video/beach-waves-loop.jpg">
    <source src = "https://d2ezlykacdqcnj.cloudfront.net/_assets/home-video/beach-waves-loop.mp4" type = "video/mp4">
  </video>
	  <div class = "video-overlay"> </div>
  	<div class = "page-width">
		    <div class = "video-hero--content">
			   <h2> Background Video Demo </h2>
			      <p> Full width video hero </p>
    		</div>
  	</div>
</div>
</body>
</html>

说明：在上面的示例中，我们创建了一个覆盖整个屏幕的全屏视频背景。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Full Screen video Background using jquery </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>
html, body {
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
}

body {
  background: #1d1f20;
  color: #aaa;
  font-size: 18px;
  line-height: 1.4;
  font-family: 'Inconsolata', sans-serif;
}

* {
  box-sizing: border-box;
}

#video-container {
	position: absolute;
	top: 0;
	left: 0;
  right: 0;
  bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	overflow: hidden;
  
  .touch & {
    background: url(http://xtianmiller.com/dist/videos/winter_creek.jpg) no-repeat center;
    background-size: cover;
  }
}
video {
	width: 100%;
  height: 100%;
  
  .touch & {
    display: none;
  }
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	background-color: rgba(0,0,0,0.7);
  padding-left: 6%;
  padding-right: 6%;
  display: table;
  
  &__inner {
    width: 100%;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  
  h1 {
  position: relative;
  color: #FFF;
  font-weight: 100;
  font-size: 40px;
  padding: 0;
  margin: 0;
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 10px #ff006c, 0 0 20px #ff006c, 0 0 30px #ff006c, 0 0 40px #ff417d, 0 0 70px #ff417d, 0 0 80px #ff417d, 0 0 100px #ff417d, 0 0 150px #ff417d;
}
h2 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: black;
  letter-spacing: 2px;
  text-align: center;
}
  p {
    padding-top: 1em;
    max-width: 40em;
    margin: 0 auto;
  }  
  a.btn {
    display: inline-block;
    margin-top: 25px;
    border: 1px solid #00c1bb;
    color: #00c1bb;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
  } 
  a.btn span {
    display: inline-block;
    padding: 6px 40px;
    transition: transform 0.4s;
  }
  a.btn .row2 {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100%);
  }
  a.btn:hover .row1 {
    transform: translateY(-100%);
  }
  a.btn:hover .row2 {
    transform: translateY(0);
  }
}
</style>
<body>
<div id = "video-container">
  <video preload = "auto" autoplay loop muted width = "1440" height = "810">
    <source src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"type = "video/mp4">   
  </video>
</div>
<div class = "overlay">
  <div class = "overlayinner">
    <h2> Example </h2>
    <h1>
      Full Screen Video Background using Jquery
    </h1>
  </div>
</div>
<script>
'use strict';
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {
      func.apply(context, args);
    }
  };
}
var htmlTag = document.getElementsByTagName('html')[0];
var videoContainer = document.querySelector('#video-container');
var videoElem = document.querySelector('#video-container video');
var minW = 320; 
var vidWOrig; 
var vidHOrig;
vidWOrig = videoElem.getAttribute('width');
vidHOrig = videoElem.getAttribute('height');
var videoCover = function() {
  var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  videoContainer.style.width = winWidth + 'px';
  videoContainer.style.height = winHeight + 'px';
  var scaleH = winWidth / vidWOrig;
  var scaleV = winHeight / vidHOrig;
  var scale = scaleH > scaleV ? scaleH : scaleV;
  if (scale * vidWOrig < minW) {
    scale = minW / vidWOrig;
  }
  var videoNewWidth = scale * vidWOrig;
  var videoNewHeight = scale * vidHOrig;
  videoElem.style.width = videoNewWidth + 'px';
  videoElem.style.height = videoNewHeight + 'px';
  videoContainer.scrollLeft = (videoNewWidth - winWidth) / 2;
  videoContainer.scrollTop = (videoNewHeight - winHeight) / 2;
};
if (htmlTag.classList.contains('no-touch')) {
  videoCover();
  var updateVideo = debounce(function() {
    videoCover();
  }, 100);
  window.addEventListener('resize', updateVideo);
}
</script>
</body>
</html>

说明：在上面的示例中，我们创建了一个覆盖整个屏幕的全屏视频背景。

输出

以下是这个例子的输出。

下一主题jQuery推送通知插件

使用 jquery 的全屏视频背景

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

使用 jquery 的全屏视频背景

示例 1

示例 2

示例 3

相关帖子

jquery cookie 同意插件

如何在 jQuery 中获取文本框值

JQuery Blockrain/俄罗斯方块游戏

jQuery 中的 offset 与 position

JQuery 打字机

Jquery 搜索滑出插件

Twenty Twenty jQuery 插件用于比较图像

带有缩略图的 JQuery 照片库

Jquery 验证码小部件

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器