THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Create Responsive Video Background Website Using HTML and CSS 2019

Create Responsive Video Background Website Using HTML and CSS 2019





In this video, we will see

1. Responsive Video Background using pure HTML and CSS.
2. How to use custom fonts.
3. Layout for each section.
4. Media queries
5. A new property of CSS3

To show a video in HTML, use the <video> element.

How it Works


The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.



HTML CODE


<html>
</head>
<body>

<header>
<div id="centerdiv">
<h1>RESPONSIVE VIDEO BACKGROUND</h1>
<a href="https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA?view_as=subscriber" target="_blank"><button class="btn">Awesome</button></a>
</div>
<video id="videoid" autoplay loop muted >
<source src="neon.mp4" type="video/mp4">
</video>
</header>

<section id="sec1">
<div id="centerdiv">
<h1>THIS IS SIMPLY AWESOME</h1>
</div>
</section>

<section id="sec2">
<div id="centerdiv">
<h1>THIS IS SIMPLY AWESOME</h1>
<h1>THAPA TECHNICAL</h1>
</div>
</section>

<footer id="footer">
<h3>thapatechnical</h3>
</footer>

</body>
</html>






           

CSS Code: Include it inside Style tag.


           *{
margin: 0;
padding: 0;
font-family: 'thapaneon';
}

header{
width: 100%;
height: 100vh;
position: relative;
}

@font-face{
font-family: 'thapaneon';
src:url('neon2.ttf') format('truetype');
}

#videoid{
position: fixed;
z-index: -1;
}

#centerdiv{
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50% , -50%);
text-align: center;
font-size: 2rem;
text-shadow: 2px 4px 4px purple;
}

.btn{
padding: 15px;
background-color: purple;
font-size: 1.3rem;
border:none;
margin-top: 20px;
color: white;
}

#sec1{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('bgimgneon.jpg');
background-size: 100%, 100%;
position: relative;
}

#sec2{
width: 100%;
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('neon2.jpg');
background-size: 100%, 100%;
position: relative;
}
#footer{
width: 100%;
line-height: 50px;
background-color: purple;
color: white;
text-align: center;
}

5 comments:

  1. How to make custom vedio player with photo and MySQL

    ReplyDelete
  2. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.
    고스톱

    ReplyDelete
  3. Flawlessly made substance, an obligation of appreciation is for unequivocal data.
    NDTV.com Latest News From Girl in Delhi

    ReplyDelete