Full Width Video Background with HTML5 & CSS

In our previous post, We have created a Mobile-Friendly Fullscreen Video Background with the help of CSS and jQuery. But what about making a full width with an overlay pattern?

This post is all about making a Full-Width Video Background by using HTML5 & CSS. Such type of layout video can be used for the header.

Just like we do add background image in the header to give an attractive look to site users. Similar, We can add a video to draw more user attention.

Videos always stop people and take notice, increasing the time they spend on a site. More time stay user on-site means that probably lead to more interaction with different web pages.

Anyway, the solution I am going to share with you — Build with purely CSS by taking help of CSS3 property. Here We must thanks to CSS3 for making complex things easy to create.  For this tutorial, Let’s goodbye Javascript.

To make the video work as a background, We are going to use HTML5 video. That means you have full control over HTML5 video tags to customize it.

You can enhance the functionality of video and add more control with the help of Javascript. Just like we did attach the poster and a dots overlay pattern to make it look charming.

How to Crate Full-width Video Background

You can simply download the files. Add a style.css file in the head of the document.

<link rel="stylesheet" type="text/css" href="css/style.css" />

Few things keep in mind while implementing on your site. We have a section and a fullwidth-container which helps us to add max-width and allow to control the position of an element including width and height.

<section class="content">
    <div class="fullwidth-container">    
    	...
    </div>
</section>

In a demo, You notice, the video has some content and a button over the video. This can be done using the following code by placing inside the fullwidth-container.

<div class="header-text">
<h1>Heading Go Here</h1>
    <div class="button_header">
    <a target="_blank" href="https://itunes.apple.com/es/app/admirapp/id1122928958"><img src="https://admira.app/wp-content/uploads/2018/11/appstore.png"></a>
    </div>
</div>

Finally, We will define a wrapper for fullwidth video and then place a video using the HTML5 video tag.

<div class="wrapper-fullwidth-video">
    <video class="fullwidth-video" poster="path/admira-app-1.jpg" autoplay loop muted="" width="300" height="150">	    	         <source src="path/Admira-Digital-Signage-App_3.mp4" type="video/mp4">
    	<source src="path/Admira-Digital-Signage-App_3.mp4" type="video/mp4">
    </video>
</div>

Adding Overlay Pattern

To implement pattern over the video, We will use the :before element with fullwidth-container

.fullwidth-container::before {
    content: "";
    position: absolute;
    width: 100%;
    opacity: 0.3;
    background-image: url(https://cdnjs.cloudflare.com/ajax/libs/vegas/2.3.1/overlays/03.png);
    z-index: 1;
    height: 100%;
}

That’s It! Hope you like it and surely going to customize it to make it more beautiful.