In this post we learn how to create a full screen video background using HTML and CSS. The video background is always 100 percent height and width of the browser. We then overlay some text on top of our video background, and place some content below our full scree video background which is viewable when the page is scrolled.
Step 1: Setup the HTML
The HTML is very simply. We create a container div which will hold our video, overlays, and image. The full screen video background will be displayed on desktop and the image will replace the video when viewing the site on a mobile device.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="background-video-container"> <video class="background-video-element" autoplay muted loop > <source src="assets/background_video.mp4" /> </video> <img class="background-video-image" src="assets/background_video_image.png" /> <div class="background-video-overlay"></div> <div class="background-video-text-overlay"> Easy, Code Is </div> </div> <div class="content"> CONTENT BELOW THE FULL SCREEN VIDEO BACKGROUND! </div> |
Step 2: Style it up with CSS!
Now that we have our HTML setup, all that is left to do is apply some styles to the classes we created for each of our HTML elements.
.background-video-container class
This is our container class around everything. It holds our video, video overlays, and image for mobile. Position absolute with top, left, right, bottom, of zero, will keep it in our browsers view. The overflow hidden will remove and scroll bars caused by the contents inside of the div. The media query makes sure that on mobile the position changes to relative. This allows the image to adjust to 100% width of the mobile device and allows the content under the image on mobile to always be right under the image.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.background-video-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: -100; } @media screen and ( max-width: 800px ) { /* mobile */ .background-video-container { position: relative; } } |
.background-video-element class
This is the actual video element. The video will always take up the entire view port, 100 percent width and height. When the browser gets resized, the video will be centered in the browsers view port because we have the transforms set to -50%. After defining the class, we need to also add the class to both the desktop and mobile media queries. On desktop we want to display the video, and on mobile we want to hide the video.
|
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 |
.background-video-element { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX( -50% ) translateY( -50% ); -moz-transform: translateX( -50% ) translateY( -50% ); -webkit-transform: translateX( -50% ) translateY( -50% ); transform: translateX( -50% ) translateY( -50% ); } @media screen and ( min-width: 800px ) { /* desktop */ .background-video-element { display: block; } } @media screen and ( max-width: 800px ) { /* mobile */ .background-video-element { display: none; } } |
.background-video-image class
This is the class for our image. On desktop we want to hide the image, and on mobile we want to display the image. So, we add our class to both the desktop and mobile media queries.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@media screen and ( min-width: 800px ) { /* desktop */ .background-video-image { display: none; } } @media screen and ( max-width: 800px ) { /* mobile */ .background-video-image { display: block; width: 100%; } } |
.background-video-overlay class
This class is our dark overlay. We give it a little opacity so we can see through the black background to the video playing. This allows the text we place on top of the video to be more readable and it looks much cleaner. We only display this on desktop because our image is already dark enough that any text overlay we place on the image for mobile will look good.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@media screen and ( min-width: 800px ) { /* desktop */ .background-video-overlay { height: 100%; width: 100%; position: absolute; background: rgba( 1, 1, 1, 0.8 ); } } @media screen and ( max-width: 800px ) { /* mobile */ .background-video-overlay { display: none; } } |
.background-video-text-overlay class
This is the text we are placing on top of our video on desktop and image on mobile. We setup the defaults for this div so that the text is always in the center of the browser with translate, top, left set to 50% along with text align of center. Color of the text is set to white, #FFF, and font is nice and big at 90px. Only thing we are changing for mobile view is the font size, we are bring that down to 30px for mobile devices.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.background-video-text-overlay { position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50% ); color: #fff; font-size: 90px; text-align: center; } @media screen and ( max-width: 800px ) { /* mobile */ .background-video-text-overlay { font-size: 30px; } } |
.content class
The content class is everything under the full screen video background. We define the class first and give it some margin and make sure the text is centered. The key style here is the styles in the desktop media query. Since our video is always 100 percent of the height of our browser window, we need to give our content a margin top of 100 percent of the browser window. In the media query, the “margin: 100vh 0 0 0;” sets the margin top to 100 percent of the browsers view port height (100vh). Now our content div always starts right below the height of the browser because it has a margin top of 100 percent of the browsers view port height.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.content-inner { text-align: center; margin-top: 20px; margin-bottom: 40px; display: inline-block; } @media screen and ( min-width: 800px ) { /* desktop */ .content { margin: 100vh 0 0 0; width: 100%; } } |
That is how we create a full screen video background using HTML and CSS. Well, that is going to do it for this post, leave a comment, let me know what you want to learn and see implemented next.
Links
The full code example can be found in the GitHub link above along with a live demo! The video tutorial for this can also be found in the YouTube link above. That is going to do it for this post! Leave any comments/questions/concerns below and thanks for stopping by the blog!