How Build video-player in html And css ?

Question

Kirubel_2 15 Newbie Poster

7 Months Ago

<head><title>navigation</title>
<link rel="stylesheet" href="../css/nav.css">
<link rel="stylesheet" href="../css/tutorial.css">
<link rel="stylesheet" href="../css/vedio.css">
<link rel="stylesheet" href="../../ionicons-2.0.1/css/ionicons.min.css">
</head>
<body>
    <div class="container">
        <button onclick="unb()" id="but">&#9776</button>
            <ul>
                <li><a href="#">MyList</a></li>
                <li><a href="#">KitHub</a></li>
                <li><a href="#">Comment</a></li>
                <li><a href="#">Image</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Help</a></li>

                <input type="search" name="search" placeholder="SEARCH TUTORIAL VIDEO" id="search">
            </ul><br>
            <!-- <button>&#8998</button> close -->
            <i style="font-size: 49px; color: white;margin-right: 10px;" onclick="img()" class="ion-ios-contact-outline"></i>
    </div>
    <div class="s">
        <div class="sidebar" id="side">
            <ul id="na">
                <li onmousemove="ule()" style="background: #0004;"><a href="paint.html" id="li"  title="paint" ><i class="ion-android-home"></i><span id="text0"  title="welcome page">Welcome Page</span></a></li>
                <li onmousemove="ule1()"><a><i class="ion-android-folder"></i><span id="text1"  title="Quiz">Klearning quiz</span></a></li>
                <li onmousemove="ule2()"><a><i class="ion-ios-videocam"></i><span id="text2" title="Tutorial">Tutorials</span></a></li>
                <li onmousemove="ule3()"><a>&#3948<span id="text3" title="Shola package">Shola package</span></a></li>
            </ul>

        </div>




        <div class="body2">
            <div class="d">
            <input type="button" id="in" value="see icon name"></br>

            <div class="contain" id="contain">
                <ul id="ul">
                    <li> <a href="#">Profile</a></li>
                    <li><a href="#">Kirubel689@gmail.com</a></li>
                    <li><a href="#">ETHIOPIA</a></li>
                    <li><a href="#">Kirubel689</a></li>
                </ul>
            </div>
        </div>
            <div class="dis">
            <video src="../img/The.Originals.S01E01.480p.mkv" controls style="border: 1px solid #1245;" height="100%" width="100%"></video>

            <div class="dis-box">
                <div class="title">
                    <h1>The Originals S01E01</h1>
                </div>
                <div class="icon">
                    <span id="span1" onmouseover="un()">&#5684<sub class="like" id="like">like</sub></span>
                    <span id="span2" onmouseover="un1()">&#6626<sub class="like" id="share">Share</sub></span>
                    <span id="span3" onmouseover="un2()">&#8878<sub class="like" id="follow">Follow</sub></span>
                </div>
                <div class="obexser">
                    <div class="profile" width="100%">
                        <img src="../img/luca.png" height="30px" width="30px" style="border-radius: 50%; border: 1px soild #0003;">
                    </div>
                    <div class="obexser-name" width="100%">
                        <span>Kira For Ever</span>
                    </div>
                </div>
                <div class="discr">
                    <details>
                        <summary>Discription list</summary>
                        <span><a href="#">https//home.html</a></span>
                    </details>
                </div>
            </div>
        </div>
        <hr style="color: aqua;">
            <div class="grid">

                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/game.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Game</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/arcane.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Education tutorials</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/luca.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Coding tutuorials</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/w11.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>University Education </h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/w12.png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>Short</h2>
                    </div></a>
                </div>
                <div class="card">
                    <a href="paint.html"><div class="card-img">
                        <img src="../img/Screenshot (6).png" width="100%" height="190px" id="img"></img>
                    </div>
                    <div class="card-title">
                        <h2>best obexser</h2>
                    </div></a>
                </div>
            </div>
            <h2 style="display: block;color: transparent;">AWTAR</h2>
        </div>

</div>
<script>
    function un(){
        x=document.getElementById("like").style.display;
        if(x!="none"){
            x=document.getElementById("like").style.display="none";
        }
        else{
            x=document.getElementById("like").style.display="initial";
        }
    }
    function un1(){
        x=document.getElementById("share").style.display;
        if(x!="none"){
            x=document.getElementById("share").style.display="none";
        }
        else{
            x=document.getElementById("share").style.display="initial";
        }
    }
    function un2(){
        x=document.getElementById("follow").style.display;
        if(x!="none"){
            x=document.getElementById("follow").style.display="none";
        }
        else{
            x=document.getElementById("follow").style.display="initial";
        }
    }
</script>
<script src="../js/script.js"></script>
<script src="../js/img.js"></script>
</body>

</html:5>

html-css

2 Contributors
2 Replies
35 Views
2 Months Discussion Span
Latest Post 5 Months Ago Latest Post by simhakidsden

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Kirubel_2 15 Newbie Poster · Answer 1 · 2024-03-30T13:48:31+00:00

body{
    /* background: url(../img/w11.png); */
    background: url(../img/m.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    margin: 0;
    padding: 0;
    height: 101vh;
    overflow-y: hidden;
}

.container button{
    background: transparent;
    color:white;
    font-size: 20px;
    border:1px solid transparent;
}
.container button:hover{
    cursor: pointer;
    color:#2837;
}
.container{
    width: 100%;
    height: 50px;
    display: flex;
    background:linear-gradient(90deg,rgb(0,0,0,0.9),rgb(0,0,0,0.4));
    border-bottom: 1px solid #0007;
}
.container ul{
    width: 100%;
    display: flex;
}
.container ul li{
    margin-left: 10px;
    list-style: none;
}
.container ul li a{
    text-decoration: none;
    font-family: Arial;
    /* font-weight: bold; */
    font-style: normal;
    font-size: 13px;
    color:white;
}
.container ul li a:hover{
    color:rgba(221, 12, 158, 0.967);

}
.sidebar{
    border-right: 1px solid #0007;
    padding: 0%;
    width: 240px;
    /* transition: 0.7s all ease-in-out; */
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
    height: 100%;
    background:  linear-gradient(180deg,rgb(0,0,0,0.9),rgb(0,0,0,0.4));
}
.sidebar ul{
    list-style: none;
    /* float: left; */

    margin-top: 10px;
    /* text-align: center; */
    padding:4%;
}

@media screen and (max-width: 750px ) {
    #side{
        width: 80px;
    }
    #na li a span{
        display: none;
    }
    #na{
        text-align: center;
    }
}

.sidebar ul li {
    margin-top: 16px;
    font-size: 30px;
    padding: 5px;
}
.sidebar ul li a{
    color: white;
    text-decoration: none;


}
.sidebar ul li:hover{
    background: rgb(3, 41, 72);
    border-radius: 10px;
    cursor: pointer;
}
.sidebar ul li a span{
    color: white;
    float: right;
    display: block;
    font-size: 14px;
    margin-right: 30px;

   margin-top: 11px;
   margin-bottom: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.sidebar ul li a span {
    text-decoration: none;
}
.container ul #search{
    margin-top: -3px;
    margin-bottom: 2px;
    color: White;
    border: 1px solid transparent;
    height: 30px;
    width: 30%;
    background: rgba(2, 21, 71, 0.506);
    font-family: arial;
    font-size: 10px;
    border-radius: 15px;
    margin-left: 40%;
    margin-right: 5%;
    border: 1px solid #0007;
}
.container ul #log{
    margin-top: -10px;
    margin-bottom: 2px;
    color: White;
    border: 1px solid transparent;
    height: 100px;
    width: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    display: block;
    font-family: arial;
    font-weight: bold;
    font-size: 10px;
    border-radius: 15px;
    margin-left: 40%;
    margin-right: 5%;

}
#b{
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.contain{
    color:white;
    margin-left: 40%;
    background: linear-gradient(90deg,rgb(0,0,0,0.9),rgb(0,0,0,0.4));

    padding: 0;

    transition: 1s all ease;
    width:0px;
}
.contain ul{
    width: 100%;
    color: white;
    padding: 0;
    display: none;
    margin: 0;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.contain ul li a{
    padding: 0;

    text-decoration: none;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.contain ul li  {

    list-style-type: none;
    width: 100%;
    padding: 0;
    height: 40px;

}
.contain ul li:hover {
    background: rgb(6, 69, 111,0.5);
    cursor: pointer;
}
.d{
    display: flex;
}
#ic{
    background: linear-gradient(90deg,rgb(87,25,45,0.7),rgb(87,25,45,0.3));
    display: block;
}
#search::placeholder{
    text-align: center;
    color: #fff7;
    font-weight: bold;
}
.body{
    height: 100%;
    width: 100%;

    background: rgb(22,22,22,0.3);
    background-size: cover;
    background-repeat: no no-repeat;
    overflow-y: scroll;
    overflow-x: auto;
}
.body2{
    height: 100%;
    width: 100%;

    background: rgb(0,0,0,0.9);
    overflow-y: scroll;
    overflow-x: auto;
}
#in{
    background: #070707;
    border:1px solid transparent;
    margin-bottom: 10px;
    border-radius: 0px 0px 30px 30px;
    text-align: center;
    width: 130px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    height: 40px;
    color: white;
}
footer{
    width: 100%;
    padding-bottom: 26px;
    margin-bottom: auto;

    color: rgb(100, 83, 83);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-align: center;
    background: rgb(25, 33, 39);
}

.s{
    display: flex;
    height: 100%;
    width: 100%;
}
#learn:hover{
    background: #0007;
    cursor: pointer;
}

simhakidsden -28 Newbie Poster · Answer 2 · 2024-06-13T12:33:19+00:00

You can build a video player in HTML and CSS by using the <video> element to display the video and styling it with CSS to customize its appearance and layout. You can also use JavaScript to add additional functionality, such as play, pause, and volume controls.