How to create a Fullscreen Background Video(Source Code)
Make money for being or staying online/internet.
You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and 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
*{ 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)
» How to create a Cutout Text Effect using CSS
» Learn how to use CSS box shadow property - Source Code
» CSS explained in a few lines
» How to use the CSS Negation and Language Selectors.
» Learn how to create Gradient Backgrounds using CSS
collections_bookmark Category :: Cssdate_range Published :: 5 years ago At: 11:24 AM
event_note Detailed Date :: Dec 28th, 2018
person Writer :: Code