In This tutorial I will show you how to add a static video background using CSS, It’s a very simple and easy script and looks amazing on landing pages. In this tutorial we are using HTML5 <video> tag to embed video and CSS to put that video on background.

Above script add video using HTML5 <video> tag and in video properties we set it to mute, autoplay and loop it will play video automatically without sound and repeat it all the time in the source we put our video file.

CSS used to make video background working:

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

div, h1, p, a, video, h2{

z-index:2;

position:relative;

}

.content {

position:relative;

top:30%;

z-index:2;

margin:0auto;

max-width:720px;

text-align:center;

}

.content__heading {

margin-bottom:24px;

color:rgb(39,39,39);

font-size:44px;

}

.content__teaser {

margin-bottom:24px;

color:rgb(89,89,89);

font-size:22px;

}

.content__cta {

display:inline-block;

margin:0;

padding:12px48px;

color:rgb(255,60,100);

font-size:22px;

text-decoration:none;

border:solid4pxrgb(255,60,100);

}

.video {

position:fixed;

top:50%;left:50%;

z-index:1;

min-width:100%;

min-height:100%;

width:auto;

height:auto;

transform:translate(-50%,-50%);

}

Above CSS add video on full screen of your landing page.

That’s it.

I hope you like this tutorial please feel free to comment your problems we love to help you.

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.