react-videoplayer
Version:
A configrable react html5 video component
2 lines (1 loc) • 2.79 kB
CSS
.video-player-wrapper{background:black;width:800px;margin-left:auto;margin-right:auto;position:relative;text-align:center}.video-player-wrapper video{vertical-align:middle;width:100%}.video-player-wrapper .help-box{position:absolute;color:white;font-size:16px;padding:20px 23px;background:#000;border-radius:3px;border:1px solid;width:350px;padding-left:80px;left:calc(50% - 175px);top:50px;height:100%;max-height:515px;overflow-y:scroll;z-index:9}.video-player-wrapper .help-box p:last-child{margin-bottom:0px}.video-player-wrapper .help-box p{text-align:left;margin-bottom:10px;margin-top:0px}.video-player-wrapper .video-player-notifications{position:absolute;color:white;font-size:20px;right:25px;top:25px;padding:5px 23px;background:rgba(0,0,0,0.5);border-radius:3px;border:1px solid}.video-player-wrapper .video-player-notifications p{margin-bottom:0px;margin-top:0px}.video-player-wrapper .video-controls{display:none;height:40px;background:rgba(0,0,0,0.5);position:absolute;bottom:0px;width:100%}.video-player-wrapper .video-controls img{height:20px}.video-player-wrapper .video-controls .disabled{opacity:0.2}.video-player-wrapper .video-controls .disabled:hover{cursor:default}.video-player-wrapper .video-controls .playback-control img{width:20px;height:20px;margin-left:5px;margin-right:5px}.video-player-wrapper .video-controls .progress-bar-control{padding-left:0px}.video-player-wrapper .video-controls .progress-bar:hover{cursor:pointer}.video-player-wrapper .video-controls .progress-bar{padding:0px;width:100%;height:5px;background:#575757;border-radius:5px;position:relative}.video-player-wrapper .video-controls .progress{cursor:pointer;background:#fff;height:100%;position:absolute;top:0px;z-index:1}.video-player-wrapper .video-controls .progress-buffered{background:rgba(255,255,255,0.4);height:100%;position:absolute;top:0px}.video-player-wrapper .video-controls .time-box{padding-left:0}.video-player-wrapper .video-controls .volume-control{position:relative}.video-player-wrapper .video-controls .volume-slider{cursor:pointer;position:absolute;top:-171px;padding-top:5px;height:165px;width:20px;background:transparent;text-align:center}.video-player-wrapper .video-controls .volume-slider .volume-wrapper-box{background:rgba(0,0,0,0.7);width:20px;height:100%;top:1px;position:absolute}.video-player-wrapper .video-controls .volume-slider .volume-wrapper{background:#575757;position:absolute;width:4px;height:calc(100% - 5px);left:8px;bottom:0px}.video-player-wrapper .video-controls .volume-slider .volume{width:4px;background:#fff;bottom:0px;position:absolute;left:0px}.video-player-wrapper .video-controls .volume-button{margin-top:8.5px}.video-player-wrapper .display-flex{display:flex}.hide-video-controls::-webkit-media-controls{display:none }