How to create an HTML 5 Landing Page w/ Video Background

I want to mimic Spotify's landing page here: https://www.spotify.com/uk/video-splash/?utm_source=spotify&utm_medium=web&utm_campaign=start

I'm fairly new to coding but have created some landing pages before but never one with HTML and video as a background.

I want the same layout as Spotify with NO scrolling capability OR sound. Then I want to be able to click on the button and have a form that someone can fill out and submit. Not quite sure how to go about this.

TLDR:

How to do HTML5 Video Background
Create JS pop-up like form
Where to get videos / format to work as a background

Solution

HTML 5 WITH CSS FIX | No Jquery Needed or java

I went ahead and designed some mark up for you so at-least you have something to start with. You can copy this code and play around with it. There are some key points in your CSS for this to work please keep this in mind and you will do just fine:

Your Embedded Video Has To Have A the lowest z-index

Your width for your video must be set to 100%

You must put !Important right behind the 100%

You must Use a Fixed Or Absolute Position for all your "divs"

If you do not you can not use the z-index option in CSS

Heres Your Mark Up & I hope this helps you!

/* YOUR CSS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
}
#wrapper {
	position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1; /* <-- this plays a key roll for it to work */
    width: 100% !important /* <-- this plays a key roll for it to work */
    height: 100%;
	margin:0;
	padding:0;
}

/* Your can customize any div how ever you want this is just an example */
#login {
	position: absolute;
	z-index:2; /* <-- this plays a key roll for it to work */
	left:45%;
	top:60%;
	width:250px;
	height:100px;
	background-color: rgba(255,255,255,1.0);
	background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(99,99,99,0.8)); /* Standard syntax (must be last) */
	border-radius:7px;
}
#login a{
	color:#fff;
	text-decoration:none;
	font-size:30px;
}
#login p{
	padding-top:35px;
	padding-left:18px;
}
/* Your can customize any div how ever you want this is just an example */
#footer {
	position:fixed;
	bottom:0;
	width:100%;
	height:50px;
	background-color: rgba(0,0,0,0.8);
	z-index:3; /* <-- this plays a key roll for it to work */
}
#footer p{
	text-align:center;
	color:#fff;
	padding-top:10px;
}

<html>
<body>
<!--Place your video right after the body tag-->
<!--Notice the id="wrapper" is placed in the <video id="wrapper"></video>-->
<video id="wrapper" autoplay loop ?wmode=transparent>
<source src="http://sectorvi.com/yourmovie.mp4" type="video/mp4">
</video>

<div id="login"><p><a href="#">JOIN FOR FREE</a></p></div>
<div id="footer"><p>Remember this will only work if you have fixed or absolute postions with enables you to use z-index. ~ Jonathan Bellavaro</p></div>
  

</body>
</html>

You can view in full here: http://sectorvi.com/stackoverflow-funitect.html

Hope this gives you a good start.