HTML: Set a video as the background of a page.
Tuesday, 20 October 2015
I recently had a lot of fun implementing a single html landing page that had a video as it's background with the required content over it. So in this article I will demonstrate how easy it was. To demonstrate this, we will create a very simple landing page for a fictional Pizza delivery company called Tamu tamu pizza. FYI, "Tamu " is sweet in swahili.The Design
 |
| The final result with a video loop as it's background. |
Now create a new folder and two files in it, index.html and styles.css. You will also need the video file of course and a still image to act a background that will show up if a users browser doesn't support the video.
The HTML
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles.css"> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> </head> <body> <video autoplay muted loop poster="pizza.png"class="bgVideo"> <source src="pizza.mp4" type="video/mp4" /> </video> <div class="topContent"> <h2>Tumau tamu Pizza ...</h2> <h4>Best value for your money? Only Tamu tamu!</h4> <button>Make an order</button> </div> </body> </html>
Well the mark up is dead simple. On line 5 we are linking to the style sheet and on line 6, we are linking to a google font, the one that is used on the title. from lines 9-11, we use the HTML 5 video tag to include our video. You might also notice a number of attributes on the video tag itself. A little explanation.
- autoplay - This tells the browser to auto play the video once the page loads. This is great but a little bit problematic on some apple devices, no worries though as we shall see how to take care of this later on.
- muted - This mutes the video when it auto plays. To not mute a video you can leave this attribute out but it's generally a good idea to mute the video since it might annoy some people.
- loop - This will make the video loop infinitely until another page is opened, leave it out if you don't wish the video to loop.
- poster - This attribute simply places a poster of the video, useful when a device doesn't support the video format or auto play(some Apple devices), it will show the poster instead.
The video tag has a class of "bgVideo" which we'll use later to target it with css. Following the video tag is a div that contains the foreground information, which is a h2 title saying "Tami tamu pizza ...", a h4 sub title and a button asking the end user to make an order. To the css now.
The CSS.
body{
margin: 0;
padding: 0;
background-image: url(pizza.png);
background-size: cover;
}
.bgVideo{
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
}
.topContent{
width:100%;
height:100vh;
background: rgba(0, 0, 0, 0.4);
color: #fff;
}
h2{
margin: 0;
font-family: 'Lobster', cursive;
font-weight: 90;
font-size: 5em;
text-align: center;
}
h4{
text-align: center;
font-family: sans-serif;
}
button{
padding: 24px;
font-size: 1em;
color: #fff;
width: 200px;
background: #F88B3D;
border: 1px solid #F88B3D;
display:block;
margin: 100px auto 10px auto;
cursor: pointer;
}
The CSS is also very simple. We start by styling the body. The default padding and margin is stripped to allow the video and other elements to fully cover the whole screen. We also set a background image that will show up if a browser doesn't support the video tag. We then set the background-size to cover, this simply means that the background should cover the entire screen.
We then style the video element using the .bgVideo class. The position is set to fixed so that the video stays fixed on the background. Top and left position have a value of 0, this simply tells the browser that there should be absolutely no space on top and on the left of the video, it simply snaps the video to the edges of the browser. I also noticed that if the video is too large, some parts twill be cropped. So take some time later and look into the top, bottom, left and right values. The z-index value is set to -1000 so that it stays behind the div that follows it.
Next is the div with a class of .topContent. The width has a value of 100% so that it covers the whole horizontal space. To cover the entire vertical height of the screen, We will use CSS's vertical height(vh) property. In this case 100vh means 100% of the view port height. The background is set to black with a 0.4 opacity to give the illusion of a tint placed on top of the video. I used rgba() to accomplish this.Text color is set to white.
Both the h2 and h4 have their text aligned to the center with the h2 using Google's Lobster font with a font weight of 90 to make it thick at the size of 5em. The h4 uses the sans-serif font. They both inherit their color from their parent div.
The button is a little bit tricky especially when trying to have it vertically centered. The padding is 24px, hence making very thick plus the 200px width to make it vertically wide. It has a background color of #F88B3D and 1px solid border of the same color. Apparently the button did not inherit the font color so we manually set it to white (#fff). Then we set It's position to block so that when we later set it's right and left margin to auto it's perfectly place in the middle vertically.
margin: 100px auto 10px auto;
Simply tells the browser to apply a margin of 100px on top, auto on the right, 10px on the bottom and auto on the left of the button. Then we add the buttons cursor to a selector so that whenever the mouse cursor passes over it, itshows a hand selector.
And that's the end, I hope you enjoyed this as I did. You can download the entire project here or view the demo here.
By: Unknown | On: Tuesday, 20 October 2015 | At: 06:48 |
IN: CSS, CSS3, HTML, HTML5, Video
