![Daark Devil [Age of Technology]](http://1.bp.blogspot.com/-cu7JRtg97uQ/X4j7HKWKEAI/AAAAAAAAA-4/TweCU6GaaxolkDPpBeDOANylPJNnYB-DQCK4BGAYYCw/s1600/DaarkDevil11.png)
How to add a back video in website with html/css? | HTML and CSS Courses
Date-23/09/20
Day-Wednesday
Hello Dear Friends, I am tell about html and css courses the topic is how to add background video in website using html & css. Before I Starts the topic, I want to tell our dear readers or followers of this blog,HTML/CSS courses is used for creating basic sites or amazing websites.
Here, I am gonna to show you about coding languages, you know about coding languages like this type of codes that is given in this site post. html is a way to make a website or webpages its very hard but you first learn or complete our courses to easy for making sites.
· You know about basic html and css courses like html simple webpage but in this case, you have to know higher level of coding language,I want to tell about coding language is easy to learn. You have to learn that codes but in this case you can follow my steps and complete your learning html and css courses.
· So, Lets Start the topic_First start your computer or laptop and you have to create a folder at your desktop,Open folder that you have created at the desktop also create a .txt file rename the extension with .html and again you create a .txt file and rename the extension with .css _Finally, You have to open .html file with your suitable HTML editor or you can use Notepad,Notepad++,Brackets or other types of code editor.
· But, I tell you i am using now Brackets code editor because this software is very easy to use or suitable for me. And I suggest you to use this type of application to edit and make your project more easily.
Now, You follow my Steps-
Step 1: Copy and Paste to your .html file.......
Here, The Codes for adding background video in website in html, You can copy and make your project easily.
[ .html file code ]
<html>
<head>
<title>Background Video</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="header">
<video autoplay loop class="video-background" muted playes-inline>
<source src="background video.mp4" type="video/mp4"></video>
<div class="welcome-msg">
<h1>Welcome to Tony Creations</h1>
<h6>Beautiful website using HTML and CSS</h6>
<a href="#" class="btn btn-subscribe">Subscribe</a>
<a href="#" class="btn btn-comment">Comment</a></div>
</section>
</body>
</html>
[ .css file code ]
*
{
margin: 0;
padding: 0;
}
.header
{
background: rgba(0,0,0,0.5);
height: 100vh;
}
.video-background
{
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
@media (max-aspect-ratio:16/9)
{
.video-background
{
width: auto;
height: 100%;
}
}
.welcome-msg
{
position: relative;
text-align: center;
font-family: sens-serif;
color: #fff;
top: 150px;
}
.welcome-msg
{
font-size: 55px;
font-weight: 100;
letter-spacing: 0px;
margin-bottom: 30px;
}
.btn
{
font-size: 18px;
color: #fff;
margin: 5px;
padding: 7px 22px;
text-decoration: none;
border: 3px solid green;
border-radius: 25px;
}
.btn-subscribe:hover
{
background: green;
}
.btn-comment:hover
{
background: green;
}
--------------------------------------------------------------
Finally, You have to edit the codes where you can change your site colors,size or font style.
That yours choice to change there look.
@Thank You!
3 Comments
Very informative!!!
ReplyDeleteVery nice keep it up
ReplyDeleteCool and nice article
ReplyDelete