react-pro-video-player/dist/index.cjs.css

A fully customizable and responsive React video player with fullscreen, captions, playback speed control, advertisement support, DRM solution and modern UI support — perfect for all your professional video needs.

.video-player-overlay{align-items:center;backdrop-filter:blur(10px);background:linear-gradient(135deg,rgba(0,0,0,.95),hsla(0,0%,8%,.98));display:flex;inset:0;justify-content:center;position:fixed;z-index:50}.video-player-container{background:linear-gradient(145deg,#1a1a1a,#0f0f0f);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 32px 64px -12px rgba(0,0,0,.4),0 0 0 1px hsla(0,0%,100%,.1);overflow:hidden;position:relative;width:100%}.video-player-container.fullscreen{border:none;border-radius:0;height:100%}.video-player-container.not-fullscreen{border-radius:16px;max-width:56rem}.close-button{backdrop-filter:blur(20px);background:rgba(0,0,0,.7);border:1px solid hsla(0,0%,100%,.1);border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.3);color:#fff;padding:.75rem;position:absolute;right:1.5rem;top:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:20}.close-button:hover{background:rgba(239,68,68,.9);box-shadow:0 8px 24px rgba(239,68,68,.4);transform:scale(1.1)}.close-button-icon{height:1.25rem;width:1.25rem}.video-container{backdrop-filter:blur(20px);background:linear-gradient(135deg,#000,#1a1a1a);height:100%;line-height:0px;position:relative;width:100%}.video-element{background:linear-gradient(135deg,#000,#0a0a0a);object-fit:contain;width:100%}.video-element.fullscreen{height:100%}.video-element.not-fullscreen{border-radius:12px;height:auto;max-height:80vh;overflow:hidden}.playback-feedback{align-items:center;display:flex;inset:0;justify-content:center;pointer-events:none;position:absolute;transition:all .4s cubic-bezier(.4,0,.2,1)}.playback-feedback.visible{opacity:1;transform:scale(1)}.playback-feedback.hidden{opacity:0;transform:scale(1.2)}.playback-feedback-icon{backdrop-filter:blur(20px);background:rgba(0,0,0,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:50%;box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px hsla(0,0%,100%,.05);padding:2rem}.playback-feedback-icon svg,.playback-icon{color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));height:3rem;width:3rem}@media (min-width:768px){.playback-feedback-icon svg,.playback-icon{height:4rem;width:4rem}}.controls-overlay{background:none;display:flex;flex-direction:column;inset:0;justify-content:flex-end;pointer-events:none;position:absolute;transition:opacity .4s cubic-bezier(.4,0,.2,1)}.controls-overlay.visible{opacity:1}.controls-overlay.hidden{opacity:0}.controls-row{background:none;padding:.5rem 1.5rem 0}.controls-row,.seekbar-row{align-items:center;display:flex;gap:.5rem;pointer-events:auto}.seekbar-row{padding:0 1.5rem 1.2rem;width:100%}.seekbar-time{color:#fff;flex-shrink:0;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.95rem;line-height:20px;max-width:60px;min-width:48px;opacity:.9;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.control-button{align-items:center;background:none!important;border:none;border-radius:50%;box-shadow:none;color:#fff;display:flex;justify-content:center;min-height:2.2rem;min-width:2.2rem;outline:none;padding:.3rem;transition:color .2s}.control-button:hover{background:none!important;color:#fbbf24;transform:scale(1.1)}.control-button:focus{outline:none}.control-icon{color:inherit;height:1.3rem;width:1.3rem}.play-pause-button .control-icon{height:1.7rem;width:1.7rem}@media (min-width:768px){.controls-row{gap:.5rem;padding:.7rem 2rem 0}.seekbar-row{padding:0 2rem 1.5rem}.control-icon{height:1.5rem;width:1.5rem}.play-pause-button .control-icon{height:2rem;width:2rem}}.video-title{display:none!important}.seek-slider{-webkit-appearance:none;appearance:none;background:#222;border-radius:2.5px;cursor:pointer;height:5px;transition:background .2s;width:100%}.seek-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#f97316 var(--progress-percent,0),#444 var(--progress-percent,0));border-radius:2.5px;height:100%;width:100%}.seek-slider::-moz-range-track{background:#444;border-radius:2.5px;height:100%;width:100%}.seek-slider::-moz-range-progress{background-color:#f97316;border-radius:2.5px;height:100%}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#f97316;border:none;border-radius:50%;height:14px;margin-top:-4.5px;transition:background .2s;width:14px}.seek-slider::-moz-range-thumb{background-color:#f97316;border:none;border-radius:50%;height:14px;transition:background .2s;width:14px}.seek-slider:focus::-webkit-slider-thumb,.seek-slider:hover::-webkit-slider-thumb{background-color:#fb923c}.seek-slider:focus::-moz-range-thumb,.seek-slider:hover::-moz-range-thumb{background-color:#fb923c}.loading-overlay{align-items:center;backdrop-filter:blur(10px);background:linear-gradient(135deg,rgba(0,0,0,.95),hsla(0,0%,8%,.98));display:flex;inset:0;justify-content:center;position:fixed;z-index:50}.loading-content{backdrop-filter:blur(20px);background:rgba(0,0,0,.8);border:1px solid hsla(0,0%,100%,.1);border-radius:16px;box-shadow:0 32px 64px rgba(0,0,0,.4),0 0 0 1px hsla(0,0%,100%,.05);padding:3rem;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:3px solid rgba(251,191,36,.3);border-radius:50%;border-top-color:#fbbf24;box-shadow:0 0 20px rgba(251,191,36,.3);height:4rem;margin:0 auto 1.5rem;width:4rem}@keyframes spin{to{transform:rotate(1turn)}}.loading-text{color:#fff;font-size:1.25rem;font-weight:500;margin-bottom:1.5rem}.loading-progress-container{background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.1);border-radius:9999px;height:.5rem;margin-top:1rem;overflow:hidden;width:20rem}.loading-progress-bar{background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:9999px;box-shadow:0 0 10px rgba(251,191,36,.5);height:.5rem;transition:all .3s ease}.loading-progress-text{color:#fbbf24;font-size:.875rem;font-weight:500;margin-top:.75rem}.error-overlay{align-items:center;backdrop-filter:blur(10px);background:linear-gradient(135deg,rgba(0,0,0,.95),hsla(0,0%,8%,.98));display:flex;inset:0;justify-content:center;position:fixed;z-index:50}.error-content{backdrop-filter:blur(20px);background:rgba(0,0,0,.8);border:1px solid rgba(239,68,68,.3);border-radius:16px;box-shadow:0 32px 64px rgba(0,0,0,.4),0 0 0 1px rgba(239,68,68,.1);padding:3rem;text-align:center}.error-icon{color:#ef4444;filter:drop-shadow(0 4px 8px rgba(239,68,68,.3));font-size:4rem;margin-bottom:1.5rem}.error-title{color:#fff;font-size:1.5rem;font-weight:600;margin-bottom:1rem}.error-message{color:#9ca3af;font-size:1rem;margin-bottom:2rem}.error-button{background:linear-gradient(135deg,#fbbf24,#f59e0b);border:none;border-radius:12px;box-shadow:0 4px 12px rgba(251,191,36,.3);color:#1f2937;font-weight:600;padding:.75rem 2rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.error-button:hover{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 8px 24px rgba(251,191,36,.4);transform:translateY(-2px)}.error-button.secondary{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff;margin-left:1rem}.error-button.secondary:hover{background:linear-gradient(135deg,#4b5563,#374151)}.volume-slider-container{display:inline-block;opacity:0;overflow:hidden;padding-right:5px;transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1);vertical-align:middle;width:0}.volume-control-group:focus-within .volume-slider-container,.volume-control-group:hover .volume-slider-container{opacity:1;width:60px}.volume-slider{-webkit-appearance:none;appearance:none;background:#222;border-radius:2.5px;cursor:pointer;height:5px;transition:background .2s;width:100%}.volume-slider::-webkit-slider-runnable-track{background:linear-gradient(to right,#f97316 var(--volume-percent,0),#444 var(--volume-percent,0));border-radius:2.5px;height:100%;width:100%}.volume-slider::-moz-range-track{background:#444;border-radius:2.5px;height:100%;width:100%}.volume-slider::-moz-range-progress{background-color:#f97316;border-radius:2.5px;height:100%}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:#f97316;border:none;border-radius:50%;height:14px;margin-top:-4.5px;transition:background .2s;width:14px}.volume-slider::-moz-range-thumb{background-color:#f97316;border:none;border-radius:50%;height:14px;transition:background .2s;width:14px}.volume-slider:focus::-webkit-slider-thumb,.volume-slider:hover::-webkit-slider-thumb{background-color:#fb923c}.volume-slider:focus::-moz-range-thumb,.volume-slider:hover::-moz-range-thumb{background-color:#fb923c}