Started on error handling

src/sass/plyr.scss

@@ -37,6 +37,7 @@
 @import 'components/video';
 @import 'components/volume';
 
+@import 'states/error';
 @import 'states/fullscreen';
 
 @import 'utils/animation';

src/sass/settings/captions.scss

@@ -6,5 +6,5 @@ $plyr-captions-bg: rgba(#000, 0.8) !default;
 $plyr-captions-color: #fff !default;
 $plyr-font-size-captions-base: $plyr-font-size-base !default;
 $plyr-font-size-captions-small: $plyr-font-size-small !default;
-$plyr-font-size-captions-medium: 18px !default;
-$plyr-font-size-captions-large: 21px !default;
+$plyr-font-size-captions-medium: $plyr-font-size-large !default;
+$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;

src/sass/settings/type.scss

@@ -5,6 +5,8 @@
 $plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
 $plyr-font-size-base: 16px !default;
 $plyr-font-size-small: 14px !default;
+$plyr-font-size-large: 18px !default;
+$plyr-font-size-xlarge: 21px !default;
 
 $plyr-font-size-time: 14px !default;
 $plyr-font-size-badge: 9px !default;

src/sass/states/error.scss

@@ -0,0 +1,25 @@
+// --------------------------------------------------------------
+// Error state
+// --------------------------------------------------------------
+
+.plyr--has-error {
+    pointer-events: none;
+
+    &::after {
+        align-items: center;
+        background: rgba(#000, 90%);
+        color: #fff;
+        content: attr(data-plyr-error);
+        display: flex;
+        font-size: $plyr-font-size-base;
+        height: 100%;
+        justify-content: center;
+        left: 0;
+        position: absolute;
+        text-align: center;
+        text-shadow: 0 1px 1px rgba(#000, 10%);
+        top: 0;
+        width: 100%;
+        z-index: 10;
+    }
+}

src/sass/states/fullscreen.scss

@@ -6,14 +6,17 @@
     @include plyr-fullscreen-active();
 }
 
+/* stylelint-disable-next-line */
 .plyr:-webkit-full-screen {
     @include plyr-fullscreen-active();
 }
 
+/* stylelint-disable-next-line */
 .plyr:-moz-full-screen {
     @include plyr-fullscreen-active();
 }
 
+/* stylelint-disable-next-line */
 .plyr:-ms-fullscreen {
     @include plyr-fullscreen-active();
 }
@@ -22,10 +25,10 @@
 .plyr--fullscreen-fallback {
     @include plyr-fullscreen-active();
 
-    position: fixed;
-    top: 0;
     bottom: 0;
     left: 0;
+    position: fixed;
     right: 0;
+    top: 0;
     z-index: 10000000;
 }