.video-player-container {
position: relative;
display: block;
width: 100%;
max-width: 100%;
background: #000;
border-radius: 8px;
overflow: hidden;
font-family: Arial, sans-serif;
box-sizing: border-box;
margin: 0 auto;
}
.video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
}
.video-wrapper video {
display: block;
width: 100%; height: auto; object-fit: contain; } video.video-player {
width: 100%;
height: auto;
max-width: 100%;
display: block;
box-sizing: border-box;
}
video.video-player::-webkit-media-controls {
display: none !important;
}
video.video-player::-webkit-media-controls-enclosure {
display: none !important;
} .video-controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
padding: 25px 15px 15px;
display: flex;
align-items: center;
gap: 10px;
transition: opacity 0.3s ease;
opacity: 1;
} .video-controls.auto-hide {
opacity: 0;
} .video-play-button {
background: var(--current-bulle-color, #007bff);
border: none;
border-radius: 3px;
width: 40px;
height: 40px;
min-width: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
flex-shrink: 0;
}
.video-play-button:hover {
background: #0056b3;
}
.video-play-icon {
width: 20px;
height: 20px;
fill: white;
} .video-progress {
flex: 1;
max-width: 300px;
height: 6px;
background: #ddd;
border: solid 0.5px var(--current-bulle-color, #007bff);
border-radius: 3px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.video-progress::-webkit-slider-track {
background: #ddd;
border-radius: 3px;
height: 6px;
}
.video-progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--current-bulle-color, #007bff);
cursor: pointer;
}
.video-progress::-moz-range-track {
background: #ddd;
border-radius: 3px;
height: 6px;
border: none;
}
.video-progress::-moz-range-progress {
background: var(--current-bulle-color, #007bff);
border-radius: 3px;
height: 6px;
}
.video-progress::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--current-bulle-color, #007bff);
cursor: pointer;
border: none;
}
.video-progress {
background: linear-gradient(to right, var(--current-bulle-color, #007bff) 0%, var(--current-bulle-color, #007bff) var(--progress, 0%), #ddd var(--progress, 0%), #ddd 100%);
} .video-current-time, .video-duration {
font-size: 12px;
color: white;
min-width: 35px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
} .video-tempo-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.video-tempo-button {
background: #835fc5;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
position: relative;
}
.video-tempo-button::before {
content: attr(data-tempo);
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: bold;
color: white;
padding: 1px 4px;
border-radius: 3px;
white-space: nowrap;
pointer-events: none;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.video-tempo-button:hover {
background: #5a359a;
}
.video-tempo-button svg {
width: 16px;
height: 16px;
fill: white;
}
.video-tempo-slider-container {
position: absolute;
top: -400%;
left: 51%;
transform: translateX(-50%);
background: white;
border: 2px solid #6f42c1;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 1000;
margin-top: 8px;
min-width: 300px;
}
.video-tempo-slider-container::before {
content: '';
position: absolute;
bottom: -25%;
left: 46%;
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #6f42c1;
rotate: 180deg;
}
.video-tempo-slider {
width: 250px;
height: 6px;
background: #ddd;
border-radius: 3px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
} .video-tempo-slider::-webkit-slider-track {
background: #ddd;
border-radius: 3px;
height: 6px;
}
.video-tempo-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #6f42c1;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .video-tempo-slider::-moz-range-track {
background: #ddd;
border-radius: 3px;
height: 6px;
border: none;
}
.video-tempo-slider::-moz-range-progress {
background: #6f42c1;
border-radius: 3px;
height: 6px;
}
.video-tempo-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #6f42c1;
cursor: pointer;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .video-tempo-slider {
background: linear-gradient(to right, #6f42c1 0%, #6f42c1 var(--tempo-progress, 33.33%), #ddd var(--tempo-progress, 33.33%), #ddd 100%);
}
.video-tempo-graduations {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 10px;
color: #495057;
margin-top: 5px;
}
.video-tempo-graduations span {
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
transition: all 0.2s;
font-weight: 500;
text-align: center;
flex: 1;
}
.video-tempo-graduations span:hover {
background: #e9ecef;
color: #6f42c1;
}
.video-tempo-graduations span.active {
background: #6f42c1;
color: white;
font-weight: bold;
} .video-volume-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.video-volume-button {
background: #56a321;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
position: relative;
}
.video-volume-button::before {
content: attr(data-volume);
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: bold;
color: white;
padding: 1px 4px;
border-radius: 3px;
white-space: nowrap;
pointer-events: none;
text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.video-volume-button:hover {
background: #218838;
}
.video-volume-button svg {
width: 16px;
height: 16px;
fill: white;
} .video-volume-button.muted svg {
opacity: 0.5;
}
.video-volume-button.muted::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: #dc3545;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 1px;
}
.video-volume-slider-container {
position: absolute;
top: -314%;
left: 50%;
transform: translateX(-50%);
background: white;
border: 2px solid #28a745;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 1000;
margin-top: 8px;
min-width: 200px;
}
.video-volume-slider-container::before {
content: '';
position: absolute;
bottom: -26%;
left: 45%;
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #28a745;
rotate: 180deg;
}
.video-volume-slider {
width: 150px;
height: 6px;
background: #ddd;
border-radius: 3px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
} .video-volume-slider::-webkit-slider-track {
background: #ddd;
border-radius: 3px;
height: 6px;
}
.video-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #28a745;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .video-volume-slider::-moz-range-track {
background: #ddd;
border-radius: 3px;
height: 6px;
border: none;
}
.video-volume-slider::-moz-range-progress {
background: #28a745;
border-radius: 3px;
height: 6px;
}
.video-volume-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #28a745;
cursor: pointer;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .video-volume-slider {
background: linear-gradient(to right, #28a745 0%, #28a745 var(--volume, 100%), #ddd var(--volume, 100%), #ddd 100%);
}
.video-volume-graduations {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 10px;
color: #495057;
margin-top: 5px;
}
.video-volume-graduations span {
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
transition: all 0.2s;
font-weight: 500;
text-align: center;
flex: 1;
}
.video-volume-graduations span:hover {
background: #e9ecef;
color: #28a745;
}
.video-volume-graduations span.active {
background: #28a745;
color: white;
font-weight: bold;
} .video-brightness-button {
background: rgba(255, 193, 7, 0.8);
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.video-brightness-button:hover {
background: rgba(255, 193, 7, 1);
}
.video-brightness-button svg {
width: 16px;
height: 16px;
fill: white;
stroke: white;
stroke-width: 1;
}
.video-brightness-slider {
width: 60px;
height: 4px;
background: #555;
border-radius: 2px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.video-brightness-slider::-webkit-slider-track {
background: #555;
border-radius: 2px;
height: 4px;
}
.video-brightness-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffc107;
cursor: pointer;
}
.video-brightness-slider::-moz-range-track {
background: #555;
border-radius: 2px;
height: 4px;
border: none;
}
.video-brightness-slider::-moz-range-progress {
background: #ffc107;
border-radius: 2px;
height: 4px;
}
.video-brightness-slider::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ffc107;
cursor: pointer;
border: none;
}
.video-brightness-slider {
background: linear-gradient(to right, #ffc107 0%, #ffc107 var(--brightness, 41%), #555 var(--brightness, 41%), #555 100%);
} .video-pip-button, .video-fullscreen-button {
background: rgba(108, 117, 125, 0.8);
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.video-pip-button:hover, .video-fullscreen-button:hover {
background: rgba(108, 117, 125, 1);
}
.video-download-button {
background: #d02855;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.video-download-button:hover {
background: #B82149;
}
.video-pip-button svg, .video-fullscreen-button svg, .video-download-button svg {
width: 16px;
height: 16px;
fill: white;
} @media (max-width: 768px) {
.video-player-container {
border-radius: 6px;
margin: 0;
width: 100%;
max-width: 100%;
}
.video-wrapper {
width: 100%;
max-width: 100%;
}
video.video-player {
width: 100%;
height: auto;
max-width: 100%;
}
.video-controls {
gap: 8px;
padding: 20px 10px 10px;
}
.video-play-button {
width: 35px;
height: 35px;
min-width: 35px;
}
.video-play-icon {
width: 18px;
height: 18px;
}
.video-progress {
max-width: 150px;
height: 5px;
}
.video-current-time, .video-duration {
font-size: 11px;
min-width: 30px;
}
.video-tempo-button, .video-volume-button {
width: 25px;
height: 25px;
}
.video-tempo-button::before, .video-volume-button::before {
top: -14px;
font-size: 8px;
}
.video-tempo-button svg, .video-volume-button svg {
width: 14px;
height: 14px;
}
.video-tempo-slider-container {
padding: 12px;
min-width: 250px;
}
.video-tempo-slider {
width: 200px;
height: 5px;
}
.video-tempo-graduations {
font-size: 9px;
}
.video-volume-slider-container {
padding: 12px;
min-width: 180px;
}
.video-volume-slider {
width: 120px;
height: 5px;
}
.video-volume-graduations {
font-size: 9px;
}
.video-brightness-button, .video-pip-button, 
.video-fullscreen-button, .video-download-button {
width: 25px;
height: 25px;
}
.video-brightness-button svg, .video-pip-button svg, 
.video-fullscreen-button svg, .video-download-button svg {
width: 14px;
height: 14px;
}
.video-brightness-slider {
width: 50px;
height: 3px;
}
}
@media (max-width: 480px) {
.video-player-container {
border-radius: 4px;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.video-wrapper {
width: 100%;
}
video.video-player {
width: 100%;
max-width: 100%;
height: auto;
}
.video-controls {
gap: 6px;
padding: 15px 8px 8px;
flex-wrap: wrap;
background: linear-gradient(transparent, rgba(0,0,0,0.9));
}
.video-play-button {
width: 32px;
height: 32px;
min-width: 32px;
}
.video-play-icon {
width: 16px;
height: 16px;
}
.video-progress {
max-width: 100px;
height: 4px;
order: -1;
flex-basis: 100%;
margin-bottom: 8px;
}
.video-current-time, .video-duration {
font-size: 10px;
min-width: 25px;
}
.video-tempo-button, .video-volume-button {
width: 22px;
height: 22px;
}
.video-tempo-button::before, .video-volume-button::before {
top: -12px;
font-size: 7px;
}
.video-tempo-button svg, .video-volume-button svg {
width: 12px;
height: 12px;
}
.video-tempo-slider-container {
padding: 10px;
min-width: 200px;
}
.video-tempo-slider {
width: 160px;
height: 4px;
}
.video-tempo-slider::-webkit-slider-thumb {
width: 14px;
height: 14px;
}
.video-tempo-slider::-moz-range-thumb {
width: 14px;
height: 14px;
}
.video-tempo-graduations {
font-size: 8px;
}
.video-volume-slider-container {
padding: 10px;
min-width: 160px;
}
.video-volume-slider {
width: 100px;
height: 4px;
}
.video-volume-slider::-webkit-slider-thumb {
width: 14px;
height: 14px;
}
.video-volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
}
.video-volume-graduations {
font-size: 8px;
}
.video-brightness-button, .video-pip-button, 
.video-fullscreen-button, .video-download-button {
width: 22px;
height: 22px;
}
.video-brightness-button svg, .video-pip-button svg, 
.video-fullscreen-button svg, .video-download-button svg {
width: 12px;
height: 12px;
}
.video-brightness-slider {
width: 40px;
height: 3px;
}
.video-brightness-slider::-webkit-slider-thumb {
width: 10px;
height: 10px;
}
.video-brightness-slider::-moz-range-thumb {
width: 10px;
height: 10px;
}
} .video-player-container:fullscreen {
width: 100vw;
height: 100vh;
border-radius: 0;
}
.video-player-container:fullscreen video.video-player {
width: 100%;
height: 100%;
object-fit: contain;
}
.video-player-container:fullscreen .video-controls {
padding: 20px;
gap: 15px;
}
.video-player-container:fullscreen .video-progress {
max-width: 400px;
} .video-controls.auto-hide {
opacity: 0;
pointer-events: none;
} .video-player-container:focus {
outline: 2px solid var(--current-bulle-color, #007bff);
outline-offset: 2px;
} .video-player-container::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border: 3px solid rgba(255,255,255,0.3);
border-top: 3px solid var(--current-bulle-color, #007bff);
border-radius: 50%;
animation: video-loading 1s linear infinite;
opacity: 0;
pointer-events: none;
z-index: 10;
}
.video-player-container.loading::before {
opacity: 1;
}
@keyframes video-loading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}