I want to mimic Spotify's landing page here: /?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
I want to mimic Spotify's landing page here: https://www.spotify./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
3 Answers
Reset to default 9HTML 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:
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./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./stackoverflow-funitect.html
Hope this gives you a good start.
First, here's a TLDR-jQuery-plugin-fix that uses YouTube → https://code.google./p/jquery-tubular/
BAM! You could be dunzo right there, but if you wanna do it for reals yourself, you can use the video tag & place a div on top of it that contains your actual content.
"How to do HTML5 Video Background?"
Start with the markup. Some notes:
- Three formats » MP4, OGV and WebM, one for each HTML5 Video codec
- Autoplay, loop, preload » use
<video>attributes - Image placeholder attribute,
poster, displays an image during video load in case there's any delay.
So your markup will be something like this:
<video id="myVid" autoplay loop preload="auto" poster="/path/to/placeholder-image.jpg">
<source src="myVideo.mp4" type="video/mp4" />
<source src="myVideo.webm" type="video/webm" />
<source src="myVideo.ogv" type="video/ogg" />
</video>
After that it's all CSS.
- Reset
<html>&<body>margins & padding (probs already handled, but just in case) - Set
<html>&<body>height & width to 100% and give itoverflow:hidden - Set
<video>with min-height & min-width so the aspect ratio can change (Note: you'll cut off a bit of the video on either side, but it's a background anyways, so it's fine)
And it goes:
html, body{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
#myVid {
min-width: 100%;
min-height: auto;
}
Some people use a div instead of writing rules to <html> & <body>. That's your call. Point is: overflow hidden has to be in the containing element while the video always has a minimum width & height of 100%. The overflow will extend beyond the window (hidden), but the browser will leave no gaps, spaces, or scrollbars.
"Create JS pop-up like form"
What you'll want to do is create a JS modal. Here's a tutorial. If you think tuts are too long & perhaps a bit remedial, go poking around CodePen & GitHub for examples of what you're looking for. Use them as inspiration to make your own, like this one → http://codepen.io/0leg/pen/faIKJ. Don't forget attribution!
"Where to get videos / format to work as a background"
So you have the format now. I would suggest looking around iStockPhoto and similar sites. Or use the above jQuery Plugin. Or maybe try Video Hive?
HTML5 Video documentation: http://www.w3schools./html/html5_video.asp
I would suggest using something like inspector in Chrome to look through their web page - you can learn a lot by trying to understand their CSS/HTML code and then adapting it for your use case.