Free Dynamic Video player made in HTML&CSS

html-videoplayer
Spread the love

Video player is one of the best thing in any website by which we can easily play any video in our website. Here is what I made

Here is a bit different type of video player i made while i was in college ..i was inspired from television so i planned to make one video player which will look like TV by including logo and banner news .

HERE is the CODE


///please add your won video source to play
<html>
<head>
//css part
<style>
.video{

   width:100%;
   height:640px;
   background-color:black;
}
.videocont{
position: relative;
}
.videocont:before{
content: "";
    width: 120px;
    height: 100px;
    position: absolute;
    background: url(logosite.png);
//please add your logo here
    background-size: cover;
    opacity: 30.5;
    padding: 1px;
    right: 108px;
    top: auto;


}



#news{
    z-index: 100;
    position: absolute;
    top: 612px;
    left: 0;
    background-color: blue;
    color: white;
  
    line-height: 0px;

}

.videocont1:before {
    content: "";
    width: 100%;
    height: 36px;
    position: absolute;
    background: url(news.png);
 //please add background img while      video not playing
    background-size: cover;
    opacity: 30.5;
    padding: 1px;
    right: 1596px;
    top: 726px;
    z-index: 110;
}
</style>
</head>
<body bgcolor="silver ">
<center>
<div class="videocont1">
<div class="videocont">
<marquee id="news"><h3><strong>
your text goes here like news
</strong></h3></marquee>
<video class="video"  autoplay controls poster="banner.jpg"  titles="DJSB">
<source src="pollution.mp4" type="video/mp4">-->
<!--<iframe width="100%" height="800" src="https://www.youtube.com/embed/BD_jXprtJ2I" frameborder="0" allowfullscreen></iframe>-->
</video>

</div>
</div>
</center>
</body>
</html>

OUTPUT

Its free to use but Please dont forget to give me credit..It means alot

Leave a Reply