:root {
-youtube-red : #00d2f3;
}
.container-video {
width : 100%;
height : 100%;
display : flex;
justify-content : center;
align-items : center;
}
.video-container {
width : 100%;
max-width : 520px;
border-radius : 4px;
margin : 0 auto;
position : relative;
display : flex;
flex-direction : column;
justify-content : center;
}
.container-video video {
width : 100%;
height : 100%;
max-height : 300px;
border-radius : 4px;
}
.video-controls {
right : 0;
left : 0;
padding : 4px 6px;
position : absolute;
bottom : 0;
transition : all 0.2s ease;
background-image : linear-gradient(to bottom, rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.5));
}
.video-controls.hide {
opacity : 0;
pointer-events : none;
}
.video-progress {
position : relative;
height : 8.4px;
margin-bottom : 3px;
}
progress {
appearance : none;
border-radius : 2px;
width : 100%;
height : 8.4px;
pointer-events : none;
position : absolute;
top : 0;
left : 0;
}
progress::-webkit-progress-bar {
background-color : #474545;
border-radius : 2px;
}
progress::-webkit-progress-value {
background : #00d2f3;
border-radius : 2px;
}
progress::-moz-progress-bar {
border : var(--youtube-red) solid 1px;
background : #00d2f3;
}
.seek {
position : absolute;
top : 0;
left : 0;
width : 100%;
cursor : pointer;
margin : 0;
}
.seek:hover + .seek-tooltip {
display : block;
}
.seek-tooltip {
display : none;
position : absolute;
top : -50px;
margin-left : -20px;
font-size : 12px;
padding : 3px;
content : attr(data-title);
font-weight : bold;
color : #fff;
background-color : rgb(0, 0, 0, 0.6);
}
.bottom-controls {
display : flex;
justify-content : space-between;
align-items : center;
}
.left-controls {
display : flex;
align-items : center;
color : #fff;
}
.volume-controls {
display : flex;
align-items : center;
margin-right : 10px;
}
.volume-controls input {
width : 100px;
opacity : 1;
transition : all 0.4s ease;
}
.volume-controls:hover input, .volume-controls input:focus {
width : 100px;
opacity : 1;
}
.container-video button {
cursor : pointer;
position : relative;
font-size : 12px;
padding : 3px;
border : none;
outline : none;
background-color : transparent;
}
.container-video button * {
pointer-events : none;
}
.container-video button::before {
content : attr(data-title);
position : absolute;
display : none;
top : -50px;
background-color : rgb(0, 0, 0, 0.6);
color : #fff;
font-weight : bold;
padding : 4px 6px;
word-break : keep-all;
white-space : pre;
}
.right-controls button::before {
right : 0;
}
.left-controls button::before {
left : 0;
}
.container-video button:hover::before {
display : inline-block;
}
.container-video button.settings-button:hover::before {
background : unset;
}
#settings-option {
color : #fff;
position : absolute;
bottom : 50px;
width : 85px;
background : black;
border : #fff solid 1px;
}
#settings-option div {
padding : 3px;
border : #ffffff24 solid 1px;
cursor : pointer;
}
#settings-option span {
border-bottom : 1px solid #ffffff24;
background : #2f2f2f;
display : inline-block;
width : 100%;
}
.fullscreen-button {
margin-right : 0;
}
.pip-button svg {
width : 26px;
height : 26px;
}
.playback-animation {
pointer-events : none;
position : absolute;
top : 50%;
left : 50%;
margin-left : -40px;
margin-top : -40px;
width : 80px;
height : 80px;
border-radius : 80px;
background-color : rgb(0, 0, 0, 0.6);
display : flex;
justify-content : center;
align-items : center;
opacity : 0;
}
.container-video input[type="range"] {
height : 8.4px;
background : transparent;
cursor : pointer;
padding : 0;
}
.container-video input[type="range"]:focus {
outline : none;
}
.container-video input[type="range"]::-webkit-slider-runnable-track {
width : 100%;
cursor : pointer;
border-radius : 1.3px;
transition : all 0.4s ease;
}
.container-video input[type="range"]::-webkit-slider-thumb {
height : 16px;
width : 16px;
border-radius : 16px;
background : #00d2f3;
cursor : pointer;
margin-left : -1px;
}
.container-video input[type="range"]:focus::-webkit-slider-runnable-track {
background : transparent;
}
.container-video input[type="range"].volume {
height : 5px;
background-color : #fff;
}
.container-video input[type="range"].volume::-webkit-slider-runnable-track {
background-color : transparent;
}
.container-video input[type="range"].volume::-webkit-slider-thumb {
margin-left : 0;
height : 14px;
width : 14px;
background : #fff;
}
.container-video input[type="range"]::-moz-range-track {
width : 100%;
height : 8.4px;
cursor : pointer;
border : transparent solid 1px;
background : transparent;
border-radius : 1.3px;
}
.container-video input[type="range"]::-moz-range-thumb {
height : 14px;
width : 14px;
border-radius : 50px;
border : var(--youtube-red) solid 1px;
background : #00d2f3;
cursor : pointer;
margin-top : 5px;
}
.container-video input[type="range"]:focus::-moz-range-track {
outline : none;
}
.container-video input[type="range"].volume::-moz-range-thumb {
border : #fff solid 1px;
background : #fff;
}
.container-video .hidden {
display : none;
}
.container-video svg {
width : 28px;
height : 28px;
fill : #fff;
stroke : #fff;
cursor : pointer;
}
.videocontainer {
width : 100%;
max-width : 520px;
}
.videocontainer video {
width : 100px;
height : 100%;
}