超实用的全屏视频背景插件,先来看看效果:
部分核心的代码如下:
<!doctype html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>超实用的全屏视频背景插件-Bideo.js</title>
<style>
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
overflow: hidden;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
#background_video {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
height: 100%; width: 100%;
}
#video_cover {
position: absolute;
width: 100%; height: 100%;
background: url('video_cover.jpeg') no-repeat;
background-size: cover;
background-position: center;
}
#video_controls {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
#play img {
width: 100px;
}
#pause img {
width: 90px;
}
#pause {
display: none;
}
@media (min-width: 768px) {
#video_controls {
display: none;
}
}
/* Demo page specific styles */
body {
text-align: center;
font-family: 'proxima-nova', Helvetica;
}
#container {
height: 100%;
}
#overlay {
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background: rgba(0,0,0,0.5);
}
#main_content {
z-index: 2;
position: relative;
display: inline-block;
/* Vertical center */
top: 50%;
transform: translateY(-50%);
}
#main_content h1 {
text-transform: uppercase;
font-weight: 600;
font-family: 'proxima-nova-condensed', Helvetica;
color: #fff;
font-size: 35px;
}
#main_content .sub_head {
color: rgba(255,255,255,0.5);
font-size: 18px;
}
#main_content .info {
color: rgba(255,255,255,0.5);
font-size: 12px;
margin-top: 10px;
}
#links {
margin-top: 50px;
}
#links a {
border: 2px solid rgba(255,255,255,0.20);
border-radius: 61px;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
padding: 10px 25px;
display: inline-block;
margin-right: 15px;
}
#footer {
position: absolute;
bottom: 0; left: 0; right: 0;
}
#footer a {
color: rgba(255,255,255,0.5);
text-decoration: none;
margin: 10px;
font-size: 12px;
}
#footer a:first-child {
float: left;
}
#footer a:last-child {
float: right;
}
</style>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body>
<div id="container">
<video id="background_video" loop muted></video>
<div id="video_cover"></div>
<div id="overlay"></div>
<div id="video_controls">
<span id="play">
<img src="play.png">
</span>
<span id="pause">
<img src="pause.png">
</span>
</div>
<section id="main_content">
<div id="head">
<h1>Bideo.js</h1>
<p class="sub_head">一款超实用的全屏背景视频插件</p>
<p class="info">(稍等一会! 视频需要加载完毕。)</p>
</div>
</section>
</div>
<script src="bideo.js"></script>
<script src="main.js"></script>
</body>
</html>
全部代码:超实用的全屏视频背景插件