How to create a Fullscreen Background Video(Source Code)
Make money for being or staying online/internet.

You will get a $5 starting gift when you join using this link:: GET THE OFFER NOW!!

Hey guys in this video i will show you how to create a full screen Background video with mix-blend-mode overlay text effect using html and css only.

watch the video

The background video i used for this tutorial  is under the youtube license law called: : Creative Commons Attribution license (reuse allowed)

The HTML part is very easy to set up,watch the video above.Below is the folder structure of the simple project.

  • index.html
  • custom_style.css
  • nature.mp4(video)
css code - custom_style.css file
copy

           *{
               box-sizing: border-box;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
            }
            
            body{
              margin:0;
              padding: 0;
            }
            
            
            video{
              position: absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              object-fit:cover;
              object-position: center;
            }
            
            
            .message{
              height:100vh;
              display:flex;
              align-items:center;
              justify-content: center;
            }
            
            .message h1{
              font-size:7em;
              color:white;
              z-index:1;
              text-align:center;
              mix-blend-mode:overlay;
            }
            
            
            @media(max-width:700px){
              .message h1{
                font-size:3em;
                color:black;
              }
              
              video{
                display: none;
              }
            }



         

To Download the ready project:: click here description

Save up to 80% with this Domain & Shared Hosting package deal! 80% OFF - GET OFFER NOW

Related Post(s)

» Learn how to create an overlay effect with CSS

» How to create a Cutout Text Effect using CSS

» How do I wrap text in a pre tag?[SOLVED]

» How to center anything on a wepage using CSS

» How to use the CSS Negation and Language Selectors.

collections_bookmark Category :: Css
date_range Published :: 3 years ago At: 11:24 AM
event_note Detailed Date :: Dec 28th, 2018
person Writer :: Code
  • RECENT POSTS
11 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


1 year ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


1 year ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


1 year ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


1 year ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


1 year ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


1 year ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share