JSFiddle - React, Tailwind, and code Playground

by Sahil Sunny

HTML

<div id="player_container">

            <video id="player" width="1280" height="720">

                <source src="test_video.mp4" type="video/mp4">
                <source src="test_video.ogg" type="video/ogg">
                Your browser does not support the video tag.

            </video>

            <div id="player_controls">

                <div id="player_seekbar"></div>

                <div id="player_buffered_bar"></div>

            </div>

        </div>

CSS

*{
    padding:0;
    margin:0;
}
div#player_container
{
    width: 1280px;
    margin: 0 auto;
}

video
{
    background-color: #000;
}

div#player_controls
{
    position: relative;
    width: 100%;
    height: 40px;
    margin:-5px;
    background-color: #383B42;
}

div#player_seekbar
{
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #3066DB;
    z-index: 2;
}

div#player_buffered_bar
{
    position: absolute;
    width: 100%;
    height: 10px;
    background-color: #DEDEDE;
    z-index: 1;
}