Question

76

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

rated 0 times [ 77] [ 1] / answers: 1 / hits: 8455 / 10 Years ago, wed, september 24, 2014, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gordonrockym

Add To Favorites

Follow

Total Points: 95

Total Questions: 115

Total Answers: 95

Location: Iraq

Member since Sat, Apr 16, 2022

2 Years ago

answered 10 Years ago kourtney · Accepted Answer

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.