video {display: block;}

.video-container {position: relative; cursor: pointer; text-align: left; margin: 20px 0;}

.media-controls {position: absolute; width: 100%; height: 100%; left: 0; top: 0; color: white; transition: 0.2s; user-select: none;}

.media-controls span {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; background: rgba(0,0,0,0.5); padding: 20px; border-radius: 20px;}

.video-container .media-controls {opacity: 0;}

.video-container:hover .media-controls,.video-container.paused .media-controls {opacity: 1;}

.touch .media-controls span.icon-pause {display: none;}

.media-controls .timer {position: absolute; bottom: 0; right: 0; color: white; margin: 5px 10px; padding: 2px 5px; background: rgba(0,0,0,0.5);}

.media-controls .progress {position: absolute; bottom: 20px; left: 0; width: 100%; padding: 0 10px; background: transparent;}

.media-controls .progress progress {width: 100%;}