ADDING BACKGROUND VIDEO

                      
To apply background video effect in HTML document we will use CSS in HTML Let us start:





Add CSS

/* video background */
#background-video {
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}

/* page content */
h1, h2 ,p {
color: white;
font-family: Trebuchet MS;
font-weight: bold;
text-align: center;
}

h1 {
font-size: 6rem;
margin-top: 30vh;
}


h2 { font-size: 3rem; }
@media (max-width: 750px) {
#background-video { display: none; }
body {
background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
background-size: cover;
}
}





Add HTML:

<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4>
</video>


Show full program code in one page


view live demo in Desktop mode...

Live Demo


Location: Etawah, Uttar Pradesh, India

Comments

Post a Comment

Popular posts from this blog

What is a Blogs? How to create account on Blog?

What is a blog?How to create a Blog account? Prakhar Doneria A blog is a way to create free of cost web pages which can we uploaded online on search engines for free.The world "BLOG" comes from "WEB BLOG" . A blog provides a free domain name to a person who uses it.One of the most common blog site is GOOGLE BLOG which gives free service to its user. It is one of the most common site in which every age person can post his/her blog according to his/her choice.A blog provides a secure place for its user. The topic placed on a blog can be from personal to profesional. It is intresting to know about a person who uses a "BLOG" is called "BLOGGER". The emergence and growth of blogs in the late 1990s coincided with the advent of web publishing tools that facilitated the posting of content by non-technical users who did not have much experience with HTML or computer programming. Previously, a knowledge of such technologies as HT...
Read more

What is JAVASCRIPT?How to make a program using HTML and Java | "Hello World" | Prakhar Doneria

Learn Java+HTML5 by using Notepad by, Prakhar Doneria Java is used for creating Games while HTML is used for creating web based games and pages. JAVA+HTML are together are used to make a web game. JavaScript is the Programming Language for the WebGames. Java+HTML can also be made by using NOTEPAD JavaScript can update and change both HTML and CSS. JavaScript can calculate, manipulate and validate data. Download this PDF and make a program saying "Hello World" Click to download PDF in GOOGLE DRIVE(Google One) Was the PDF helpful? Remarks: Enter a feedback if you think! Thanks YOUTUBE Animation by HTML
Read more