How to add video in html page | Beautiful landing page design using Html, CSS and JavaScript with video player
Beautiful landing page design using Html, CSS and JavaScript with video player
Learn How to make a Beautiful landing page design using Html, CSS and JavaScript with video player
Video Tutorial
For Download the Background image Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fashion Website with Pop up video player</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cointainer">
<header>
<nav>
<div class="logo">
<h4>k.m.valentin</h4>
</div>
<div class="nav-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Stories</a></li>
</ul>
</div>
<div class="cart-link">
<span><a href="#"><i class="bi bi-bag"></i></a></span>
</div>
</nav>
</header>
<div class="heading">
<h1>Retro Super Feature</h1>
<span>Start Shopping</span>
</div>
<div class="bottom-content">
<div class="left">
<span class="one">01</span>
<span class="five">05</span>
</div>
<div class="right">
<div class="text">
<h5>Super By RetroSuperFeature</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto doloribus velitcorrupti accusamus
Iusto doloribus velitcorrupti accusamus</p>
</div>
<div class="video">
<img src="./media/Screenshot (130).png" class="videoImage">
<img src="./media/play2.png" class="playButton" onclick="playVideo()">
</div>
</div>
</div>
</div>
<div class="video-player" id="videoPlayer">
<video width="100%" controls autoplay id="myVideo">
<source src="./media/video.mp4" type="video/mp4">
</video>
<img src="./media/close-button.png" class="close-btn" onclick="closeVideo()">
</div>
<script>
var videoPlayer = document.getElementById("videoPlayer");
function playVideo(){
videoPlayer.style.display = "block";
}
function closeVideo(){
videoPlayer.style.display = "none";
}
</script>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Mate+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: url(./media/bgImage1.png) no-repeat;
background-position: right;
background-size: 40rem;
}
nav {
display: flex;
width: 100%;
height: 44px;
justify-content: space-between;
align-items: center;
}
.logo {
margin-left: 25px;
cursor: pointer;
}
.logo h4 {
color: #999;
font-size: 20px;
font-family: 'Mate SC', serif;
text-transform: uppercase;
}
.nav-links ul li {
display: inline-block;
padding-left: 150px;
}
.nav-links ul li a {
text-decoration: none;
color: #111;
opacity: .8;
padding: 20px 20px;
transition: all .5s ease;
}
.nav-links ul li a:hover {
background: #0c3c8a;
color: #fff;
transition: all .5s ease;
}
.cart-link {
margin-right: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #0c3c8a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cart-link .bi-bag {
color: #fff;
}
.heading {
display: flex;
flex-direction: column;
min-height: 500px;
align-items: center;
justify-content: center;
width: 40%;
margin-left: 20px;
}
.heading h1 {
font-size: 4.5rem;
letter-spacing: 7px;
font-family: 'Merriweather', serif;
}
.heading span{
margin-top: 20px;
font-size: 17px;
letter-spacing: 5px;
color: #152643;
position: relative;
}
.heading span::before{
content: '';
position: absolute;
width: 100px;
border-bottom: 1px solid #152643;
left: -110px;
top: 9px;
}
.bottom-content{
display: flex;
height: 115px;
bottom: -4px;
position: relative;
}
.left{
width: 40%;
display: flex;
align-items: center;
height: 65px;
background: #999;
bottom: 0;
position: absolute;
justify-content: space-between;
}
.left span{
margin: 0 100px;
color: #fff;
position: relative;
}
.one::after{
content: '';
position: absolute;
width: 70px;
border-bottom: 2px solid #fff;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
top: 7px;
}
.five::before{
content: '';
position: absolute;
width: 245px;
border-bottom: 2px solid rgba(130, 126, 126, 0.652);
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
left: -250px;
top: 7px;
}
.right{
display: flex;
width: 60%;
position: absolute;
right: 0;
height: 115px;
align-items: center;
background: #020b1a;
}
.text{
padding: 0 40px;
color: #fff;
}
.text h5{
font-size: 17px;
}
.text p{
color: #999;
font-size: 12px;
}
.video{
width: 250px;
height: 115px;
display: flex;
align-items: center;
justify-content: center;
}
.videoImage{
width: 250px;
height: 115px;
position: absolute;
right: 0;
}
.playButton{
width: 50px;
z-index: 99;
cursor: pointer;
}
.video-player{
width: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
display: none;
}
.close-btn{
position: absolute;
top: 10px;
width: 30px;
right: 10px;
cursor: pointer;
}
Posts
Nice Design.......Like the design
ReplyDelete