A hero image is good but background video can show much more information in a gentle way. Your visitors don’t have to scroll through the long sections to find what you do. Instead it will showcase your business details at the beginning. So in this post i will teach you how to create a background video css without using any framework.

How to choose a background video for your site?

That’s a tricky question because in order to find a perfect video. first of all you have to take some points in mind.

  • What kind of website you have
  • What kind of services you are providing
  • Why people would choose your services over other better competitors
  • Whats your specialty

I think the above 4 points are enough to help you to take the decision. Now if you are a freelancer and want some hd free stock videos you can find it here. Ok so now if you have selected your desired video clip then let’s start coding.

Markup of background video project

First off all create a directory and named it whatever you want. Now inside that directory create 2 files one for html and another for css. Ok now open your html file and write the structure.

<header class="video-header container">
	<div class="fullscreen-video-wrap">
		<video src="video.mov" autoplay="true" loop="true">
		</video>
	</div>
	<div class="header-overlay"></div>
	<div class="header-content">
		<h1>Fullscreen video background</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		<a href="#" class="btn">Read More</a>
	</div>
</header>

I have just added the code that you have to put inside the body tag. So in the above code you can see everything is inside the header tag. In addition there are 3 boxes(div) inside the header. First of all the 1st box is used as a holder of our video. The next one will be used as an overlay so it has nothing inside it . Finally the last one is holding the contents and it will place over the video. Now our markup is ready so lets move to our style sheet.

Project background video css

Before i start to write codes for style sheet you can see how the final result will look like.

Ok so you know the codes now let me explain it step by step. Lets start from the very beginning of our css.

* { box-sizing:border-box; }
body {
	margin:0;
	font-family:"Century Gothic";
	font-size:16px;
	line-height:1.5;
	color:#333;
	overflow-x:hidden;
}

In the above code there’s nothing much special instead box-sizingĀ property. This property allows us to use inner padding to total width of boxes. If you want to know more you can check this. So now let’s move further and add styles to overlap the things.

.video-header {
	height:100vh;
	display:flex;
	align-items:center;
	color:#fff;
}

.container {
	max-width:960px;
	padding:0 10px;
	margin:auto;
	text-align:center;
}

.fullscreen-video-wrap {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	overflow:hidden;
}

.fullscreen-video-wrap video {
	min-height:100%;
	min-width:100%;
}

First of all video header is styled to cover the entire view port height. It’s displayed as flex and align items is set to center so that it puts the contents at center. The container has nothing special. The next class is styled in the way to set video coordinates to 0,0. Finally the video element is styled to have always 100% height and width. Ok so now our main styles are ready its time to style the overlay and contents.

.header-overlay {
	height:100vh;
	width:100vw;
	position:absolute;
	top:0;
	left:0;
	background:rgba(17,17,17,0.7);
	z-index:1;
}
.header-content {
	z-index:2;
}

The header overlay has height and width of full view port. The overlay background is little transparent. The video is showing behind because the overlay has opacity. Now finally the contents are placed over the overlay by using the z-index property. Ok so that’s all now open your browser and run the code.

Finally its the end of our background video css guide. Hope you have enjoyed this post and would share with your friends also.


Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

https://codersdiaries.com


3 Comments

Sarah Bean · October 12, 2017 at 12:10 am

Wow this is so over my head! nice job!

Julissa Camacho · October 12, 2017 at 12:27 am

This was very helpful and informative great job

Shaun · October 13, 2017 at 1:32 am

Good to know! Bookmarking for future updates to my site.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp WhatsApp us