How Build video-player in html And css ?

Question

Kirubel_2 15 Newbie Poster

4 Weeks 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>

css java php

1 Contributor
1 Reply
15 Views
51 Seconds Discussion Span
Latest Post 4 Weeks Ago Latest Post by Kirubel_2

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;
}