nastylování přehrávače

css/style.css

@@ -16,7 +16,7 @@ body {
 
   display: grid;
   grid-template-columns: 25vw auto;
-  grid-template-rows: auto auto;
+  grid-template-rows: 60vh auto;
   grid-template-areas:
     "comments video"
     "comments text";
@@ -33,15 +33,12 @@ aside {
 main {
   background-color: #282828;
   grid-area: video;
-
-  display: grid;
-  justify-items: center;
-  align-items: center;
+  position: relative;
 }
 
 video {
-    max-width: 100%;
-    max-height: 75vh;
+  width: 100%;
+  height: 100%;
 }
 
 article {
@@ -116,3 +113,80 @@ article p:last-child {
 .commentText {
   grid-area: comment;
 }
+
+.video-controls {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: grid;
+  grid-template-rows: auto min-content;
+  justify-items: center;
+  align-items: center;
+}
+
+.hidden {
+  display: none !important;
+}
+
+#togglePlay {
+  height: 15vh;
+}
+
+.video-progress {
+  width: 80%;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+progress {
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  border: none;
+  background-color: #616161;
+}
+
+progress::-moz-progress-bar {
+  background-color: #616161;
+}
+
+.seek {
+  position: absolute;
+  appearance: none;
+  background: transparent;
+  width: 100%;
+  height: 5px;
+  margin: 0;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.seek:focus {
+  outline: none;
+}
+
+.seek::-moz-range-thumb {
+  background-color: #ffa800;
+  width: 23px;
+  height: 23px;
+  border-radius: 23px;
+  border: none;
+}
+
+.videoComment {
+  position: absolute;
+  background-color: #ffa800;
+  width: 10%;
+  left: 45%;
+  height: 5px;
+  z-index: 1;
+}
+
+.videoComment img {
+  position: relative;
+  top: -30px;
+  left: 50%;
+  margin-left: -12px;
+  cursor: pointer;
+}