react-streamify-play/dist/index.esm.css

react-streamify-play is a simple yet customizable video player for reactjs.

.video-wrapper{border-radius:10px;height:80vh;width:70vw}.video-container{background-color:#1f1e1e;position:relative}.video,.video-container{border-radius:5px;height:100%;width:100%}.video-controls-container{background:linear-gradient(180deg,transparent,rgba(0,0,0,.5),rgba(0,0,0,.8));border-bottom-left-radius:10px;border-bottom-right-radius:10px;bottom:0;color:#fff;font-weight:500;padding:10px;position:absolute;width:100%}.timeline-wrapper{align-items:center;cursor:pointer;display:flex;height:1rem;justify-content:center;width:100%}.timeline{background-color:hsla(0,0%,9%,.463);height:4px;position:relative;width:99%}.buffer-timeline{background-color:#fff;width:50%}.buffer-timeline,.progress-timeline{height:100%;left:0;position:absolute;top:0}.progress-timeline{background-color:red;width:20%}.control-container{align-items:center;display:flex;height:2.4rem;justify-content:space-between;width:100%}.control-left,.control-right{display:flex;gap:1rem}.control-right,.setting-wrapper{position:relative}.setting-wrapper{align-items:center;display:flex;justify-content:center}.setting-container{background-color:rgba(37,36,36,.9);border-radius:7px;bottom:100%;color:#dad9d9;height:fit-content;margin-bottom:1.5rem;position:absolute;right:50%;transform:translateX(20%);width:15rem}.menu-list>li{align-items:center;border-radius:7px;cursor:pointer;display:flex;font-weight:500;justify-content:space-between;padding:.5rem 1rem}.menu-list>li:hover{background-color:rgba(92,92,92,.826)}.back-button{cursor:pointer;padding:.5rem 1rem}.loading-container{align-items:center;background-color:rgba(0,0,0,.5);border-radius:10px;display:flex;justify-content:center;left:50%;padding:1rem;position:absolute;top:50%;transform:translate(-50%,-50%)}.video-header-wrapper{left:0;position:absolute;top:0;width:100%}