Create a full-screen video background for websites with html5 and jquery | The trend of web design is now different from the old days. Where now the internet speed is much better and the technology used to create a website has also been growing, such as the emergence of html5 and jquery.

Image credit by Coverr.com
These supporting factors have proved that web designers today are not afraid to use video as a background website, they do not have to worry about the website becomes heavy and difficult to access. Understandably again, internet connection is now getting better.

• Other References: Making Youtube Videos As Background Websites

On this occasion Jurnalweb will describe a little how to make a full background video screen with html5 and jquery. This video will automatically play / autoplay the first time the website is opened, but there is a pause button if you want to stop the video. When the video is paused then the display will turn slightly darker.

Materials For Creating Video Background Websites
Like cooking, first prepare first materials / resource required as follows:

1. A video that will be used as background, with format. WEBM &. MP4, the video to be used is a video that can be downloaded zip it for free on coverr.co site. Also provide the image file taken from the video screenshot with a formal .JPG

If you want to use other short videos, just search on the 14 short-duration video stock providers website.

1. Latest jquery script (Jquery v2.2.3).

How to Create a Website Video Background With HTML5
HTML5

To make the background video HTML5 script required as below which serves to enter the video and additional information required. And a button to pause to stop the video.

<! - loop added for video to play back when completed ->

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);
}
@media screen and (max-width: 500px) {
div {width: 70%;}
}
@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].