Merge pull request #1764 from sul-dlss/t1498-style-caption-settings

Style caption settings for better usability
sul-dlss · Nov 17, 2023 · 0223ef9 · 0223ef9
2 parents e42995c + 290a8f8
commit 0223ef9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
@@ -421,3 +421,29 @@
     }
   }
 }
+
+.video-js .vjs-text-track-settings {
+  background: white !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #000;
+  max-height: 375px;
+  max-width: 640px;
+  border-radius: var(--modal-border-radius);
+  box-shadow: 5px 10px 5px gray;
+  font-size: 1em;
+
+}
+
+.vjs-track-settings-controls button {
+  border: 1px solid black;
+  border-radius: var(--modal-border-radius);
+  font-size: 1.5em;
+  padding: 3px;
+}
+
+.vjs-text-track-settings legend {
+  color: #000;
+}
diff --git a/app/javascript/src/controllers/media_tag_controller.js b/app/javascript/src/controllers/media_tag_controller.js
@@ -44,7 +44,7 @@ export default class extends Controller {
   initializeVideoJSPlayer() {
     this.mediaTagTargets.forEach((mediaTag) => {
       mediaTag.classList.add('video-js', 'vjs-default-skin')
-      videojs(mediaTag.id).removeChild('textTrackSettings')
+      videojs(mediaTag.id)
     })
   }