Big City Life

Credit video by Coverr

See tutorial at Jurnalweb.com

This is an example of making a video as the background of a website using HTML5 and JQuery

Use videos that are not too long in duration to make them smaller and less heavy when opened Pause CSS

Once the HTML structure is created, further enhanced with CSS to make it more organized, use a script like the following.

• Read also: How to Create Background Slideshow with Jquery

Script dibawha this will also put a description on the right side of the web page, and make the pause button becomes more clear.

body {
margin: 0;
background: # 000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX (-50%) translateY (-50%);
background: url ('Big-City-Life.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}

#citylife {
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
font-weight: 100;
background: rgba (0,0,0,0.3);
color: white;
padding: 2rem;
width: 33%;
margin: 2rem;
float: right;
font-size: 1.2rem;
}
h1 {
font-size: 3rem;
text-transform: uppercase;
margin-top: 0;
letter-spacing: .3rem;
}
#citylife button {
display: block;
width: 80%;
padding: .4rem;
border: none;
margin: 1rem auto;
font-size: 1.3rem;
background: rgba (255,255,255,0.23);
color: #fff;
border-radius: 3px;
cursor: pointer;
transition: .3s background;
}
#citylife button: hover {
background: rgba (0,0,0,0,5);
}

a {
display: inline-block;
color: #fff;
text-decoration: none;
background: rgba (0,0,0,0,5);
padding: .5rem;
transition: .6s background;
}
a: hover {
background: rgba (0,0,0,0.9);
}
Hive account@media screen and (max-width: 500px) {
div {width: 70%;}
}
Hive account@media screen and (max-device-width: 800px) {
html {background: url (Big-City-Life.jpg) # 000 no-repeat center center fixed; }
#bgvid {display: none; }
}
JQuery / Javascript

Up here the video can run pretty well, but for the video can be stopped when the pause button on tap, then add javascript script below. Place this script at the bottom before the tag [/ body].