Text on video
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face{
font-family:good;
src:url("Fonts/Blastimo.ttf");
}
*{
font-family:good;
margin:0;
padding:0;
}
.banner{
position:absolute;
width:100%;
height: 100vh;
overflow:hidden; /*It will hide the content which will go out of the box*/
display:flex;
justify-content:center;
align-items:center;
}
.banner video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover; /*This is used to specify how an <img> or <video> should be resized to fit its container*/
}
.banner h1{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
background:white;
text-align:center;
text-transform:uppercase;
color:black;
line-height:100vh;
mix-blend-mode:screen;
font-size:35vh;
font-size:15vw;
}
</style>
<title></title>
</head>
<body>
<div class="banner">
<video autoplay muted loop> <!--In chrome, video will run only if it contain both autoplay and muted(there will be no sound).-->
<source src="Shanti.mp4" type="video/mp4">
</video>
<h1>Shanti Mantra</h1>
</div>
</body>
</html>
Comments
Post a Comment