Improved Video JS Skin for hiding big play button in audio players and removed...

Improved Video JS Skin for hiding big play button in audio players and removed centered placement of this button in SCSS.

CHANGES.md

@@ -6,6 +6,9 @@ Changes
 
 ### Unreleased
 
+* 2019-11-13 - Improved Video JS Skin for hiding big play button in audio players and removed centered placement of this button in SCSS.
+               IMPORTANT NOTE for ADMINS: If you want the button to be centered again, please add the class "vjs-big-play-centered"
+               to the setting "media_videojs | videocssclass".
 * 2019-11-11 - Improved loginform.mustache for the info box and maintenance box to fit to the login box.
 * 2019-11-08 - Added special CSS styles for plugin mod_attendance.
 * 2019-10-28 - Changed the link in the README.md to get to the correct Font Awesome version.

README.md

@@ -366,7 +366,7 @@ We added a back to top button that appears in the right bottom corner when the u
 ### Design
 
 * Added Font Awesome icons to mailto and broken links. Furthermore, colored broken link in red for fast recognizability.
-* Added a Video JS skin that fits to the brand color and moves the player button back to the center.
+* Added a Video JS skin that fits to the brand color.
 
 Course Design:
 

scss/post.scss

@@ -1045,9 +1045,6 @@ a[href^="mailto"]::before {
     &.vjs-no-flex .vjs-menu-button-inline {
         width: 10em;
     }
-    .vjs-controls-disabled .vjs-big-play-button {
-        display: none !important;
-    }
     .vjs-control {
         width: 3em;
     }
@@ -1061,21 +1058,14 @@ a[href^="mailto"]::before {
 .vjs-menu-button-inline .vjs-menu {
     left: 3em;
 }
-.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
+.vjs-paused.vjs-has-started.video-js:not(.vjs-audio) .vjs-big-play-button {
     display: block;
 }
-.video-js {
+.video-js :not(.vjs-audio) {
     &.vjs-ended .vjs-big-play-button,
     &.vjs-paused .vjs-big-play-button {
         display: block;
     }
-    .vjs-load-progress div {
-        display: none !important;
-    }
-}
-.vjs-seeking .vjs-big-play-button,
-.vjs-waiting .vjs-big-play-button {
-    display: none !important;
 }
 .video-js {
     .vjs-mouse-display:after,
@@ -1086,24 +1076,12 @@ a[href^="mailto"]::before {
         .vjs-loading-spinner {
             display: none;
         }
-        .vjs-big-play-button {
-            display: block !important;
-        }
     }
 }
-.video-js.vjs-ended .vjs-big-play-button,
-.video-js.vjs-paused .vjs-big-play-button,
-.vjs-paused.vjs-has-started.video-js .vjs-big-play-button {
-    display: block;
-}
 .video-js {
     .vjs-big-play-button {
-        top: 50%;
-        left: 50%;
-        margin-left: -1.5em;
         background-color: $brand-primary;
         border-radius: 2px;
-        margin-top: -1em !important;
     }
     &:hover .vjs-big-play-button {
         background-color: $brand-primary;
@@ -1129,8 +1107,6 @@ a[href^="mailto"]::before {
         background-color: $brand-primary;
     }
     .vjs-big-play-button {
-        width: 2em !important;
-        margin-left: -1em;
         border-width: 2px;
     }
     .vjs-icon-play:before,