Hi!

This time I wanted to show you how to create video background. This can be very useful for a landing page or business page. Video will add motion to the page and make it feel alive.

As this is quite simple to achieve all you need to do is.

Dowload video

You will need to download any video you like and add it to your project folder

HTML markup

All wee need in HTML is code below.

<video autoplay muted loop id="myVideo">
    <source src="video\amazingvideo.mp4" type="video/mp4">
</video>

CSS

Next we need to add styles so our video will show full screen

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

Overlay

Usually we would want to add overlay to our video so we can write some quotes, or landing page information.

We will use simple div with title and text as an example.

<div class="content">
    <h1>Get Ready for an adventure!</h1>
    <p>Lorem ipsum...</p>
  </div>

And for styling we use the same approach, but this time we also need to center content.

.content {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
}
.content h1{
  font-size: 5rem;
  text-shadow: 4px 2px 3px rgba(66, 68, 90, 1);
}
.content p{
  font-size: 2rem;
}

Final result

If you find any mistakes or you have ideas how to refactor my solutions to be simplier/ better please let me know :)