How to adapt my custom multimedia video controls - HTML5/CSS3? - html

Question

I am creating a design of controls to personalize the reproduction of videos, having some errors in the design there is a disorder in the design and even more when it comes to visualizing in different type of responsive screen.
In the design of the Speed as I can order them with a drop-down menu as shown in the following example image:
How can I give the correct style to the progress bar similar to the following image:
And carry an adaptive order similar to it.
My code complete:
.seeker {
position: relative;
width: 54%;
margin: 0 1%;
display: inline-block;
margin-right: 5px;
margin: 0 10px;
}
.trackbar {
position: absolute;
width: 100%;
height: 1px;
top: 12px;
z-index: -2;
background: rgba(255,255,255,0.7);
}
.progressbar {
position: absolute;
left: 0;
top: 12px;
width: 0;
height: 1px;
border: 0;
background-color: red;
color: red;
z-index: 0;
pointer-events: none;
}
.content-video-player {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
/*background: -webkit-linear-gradient(left,rgba(0,0,0,.7) 0px,rgba(0,0,0,.7) 95px,transparent 95px,transparent 98px,rgba(0,0,0,.7) 98px);*/
background: rgba(0,0,0,.7);
-webkit-transition: bottom .4s ease-in;
}
.content-video-player div.btn {
width: 95px;
text-align: center;
float: left;
}
.btnPlay::after {
content: "";
background-image: url(http://svgshare.com/i/3um.svg);
width: 50px;
height: 50px;
display: inline-block;
background-size: cover;
position: relative;
top: -7px;
}
.btnStop::after {
content: "";
background-image: url(http://svgshare.com/i/3vz.svg);
width: 65px;
height: 65px;
display: inline-block;
background-size: cover;
position: relative;
top: -7px;
}
.video-time-player {
float: right;
color: #ccc;
text-align: center;
width: 15%;
}
.volume {
position: relative;
cursor: pointer;
width: 70px;
height: 10px;
float: right;
margin-top: 10px;
margin-right: 10px;
}
.volumeBar {
display: block;
height: 30%;
position: absolute;
top: 0;
left: 0;
background-color: #a4c9ec;
z-index: 10;
}
.sound, .btnFS {
border: none;
float: right;
}
.sound::after {
content: "";
background-image: url(http://svgshare.com/i/3v6.svg);
width: 45px;
height: 40px;
display: inline-block;
background-size: cover;
position: relative;
top: -4px;
}
.btnFS::after {
content: "";
background-image: url(http://svgshare.com/i/3u5.svg);
width: 25px;
height: 25px;
display: inline-block;
background-size: cover;
position: relative;
top: 6px;
}
<!-- Container of the controls vidio players -->
<div class="content-video-player">
<div class="btnPlay btn" title="Play/Pause video"></div>
<div class="btnStop btn" title="Stop video"></div>
<div class="spdText btn">Speed: </div>
<div class="btnx1 btn text selected" title="Normal speed">x1</div>
<div class="btnx3 btn text" title="Fast forward x3">x3</div>
<div id="seeker" class="seeker">
<div class="trackbar"></div>
<div id="progressbar" class="progressbar" style="width: 114.7px;">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<div class="video-time-player">
<span class="current">00:03</span> /
<span class="duration">00:03</span>
</div>
</div>
<div class="btnFS" title="Switch to full screen"></div>
<div class="volume" title="Set volume">
<span class="volumeBar" style="width: 84.2857%;"></span>
</div>
<div class="sound sound2" title="Mute/Unmute sound"></div>
</div>

Answer 1

The player layout is mainly 3 components (display: inline-table) within .content-video-player (display:table):
.playbackComponent | .timeComponent | .modComponent
▶ ] [ ⏸ ] [ X ] |_____ 07:22/15:01 | 🔉||||||| ⛶
The controls in each of the components have display:table-cell for a stable linear layout and position:absolute for finer grain adjustments. Included is a menu to adjust playbackRate, just hover over the 3rd button from the left X
Demo
*,
*::after,
*::before {
margin: 0;
padding: 0;
border: 0 none rgba(0, 0, 0, 0);
}
body {
overflow-y: scroll;
}
.content-video-player>* {
display: inline-table;
}
.content-video-player {
position: relative;
transform: translateY(68vh);
left: 0;
width: 100%;
height: 40px !important;
background: rgba(0, 0, 0, .7);
transition: bottom .4s ease-in;
display: table;
table-layout: fixed;
}
.seeker {
position: absolute;
width: 30%;
display: table-cell;
margin: 0 5px;
top: calc(50% - 6px);
left: 100px;
}
.trackbar {
position: absolute;
width: 100%;
height: 1px;
top: 12px;
z-index: -2;
background: rgba(255, 255, 255, 0.7);
}
.progressbar {
position: absolute;
left: 0;
top: 12px;
width: 0;
height: 1px;
border: 0;
background-color: red;
color: red;
z-index: 0;
pointer-events: none;
}
.content-video-player button.btn {
width: 48px;
text-align: center;
background-color: rgba(0, 0, 0, 0);
display: table-cell;
}
.btnPlay::after {
content: "";
background-image: url(http://svgshare.com/i/3um.svg);
width: 48px;
height: 48px;
display: table-cell;
background-size: cover;
position: absolute;
top: -4px;
}
.btnStop::after {
content: "";
background-image: url(http://svgshare.com/i/3vz.svg);
width: 56px;
height: 56px;
display: table-cell;
background-size: cover;
position: absolute;
left: 25px;
top: calc(50% - 28px);
}
.btnSpd {
transform: translateX(-35px);
height: 48px;
width: 48px;
font-size: 24px;
top: calc(50% - 24px);
}
.video-time-player {
position: absolute;
color: #ccc;
text-align: center;
left: 11.5em;
font-size: .3em;
width: auto;
min-width: 90px;
}
.video-time-player>* {
display: inline-block;
}
.volume {
position: relative;
cursor: pointer;
width: 80px;
height: 10px;
right: -5em;
top: 17px;
}
.volumeBar {
display: block;
height: 30%;
position: absolute;
background-color: #a4c9ec;
z-index: 10;
}
.sound,
.btnFS {
border: none;
}
.sound::after {
content: "";
background-image: url(http://svgshare.com/i/3v6.svg);
width: 45px;
height: 40px;
display: table-cell;
background-size: cover;
position: absolute;
top: 4px;
left: 25.5em;
}
.btnFS::after {
content: "";
background-image: url(http://svgshare.com/i/3u5.svg);
width: 25px;
height: 25px;
right: 5px;
display: table-cell;
background-size: cover;
position: absolute;
top: 12px;
}
.speed {
display: none;
position: absolute;
max-height: 0;
transition: max-height 1s;
}
.speed:hover,
.btnSpd:hover .speed {
display: inline-table;
list-style: none;
max-height: 300px;
transition: max-height 1s;
top: -170px;
}
.cmp {
width: 30%
}
<!-- Container of the controls vidio players -->
<main class='content-video-player'>
<section class="cmp playbackComponent" style='display:inline-table'>
<button class="btnPlay btn" title="Play/Pause video"></button>
<button class="btnStop btn" title="Stop video"></button>
<button class="btnSpd btn">X
<ul class='speed'>
<li>x3.0</li>
<li>x2.5</li>
<li>x2.0</li>
<li>x1.5</li>
<li>x1.0</li>
<li>x0.5</li>
</ul>
</button>
</section>
<section class='cmp timeComponent' style='display:inline-table'>
<div id="seeker" class="seeker">
<div class="trackbar"></div>
<div id="progressbar" class="progressbar" style="width: 114.7px;">
<span class="bufferBar"></span>
<span class="timeBar"></span>
</div>
<time class="video-time-player">
<b class="current">00:03</b> /
<b class="duration">00:03</b>
</time>
</div>
</section>
<section id='cmp ModComponent' style='display:inline-table'>
<div class="volume" title="Set volume">
<span class="volumeBar" style="width: 84.2857%;"></span>
</div>
<button class="btn sound sound2" title="Mute/Unmute sound"></button>
<button class="btn btnFS" title="Switch to full screen"></button>
</section>
</main>