Attempt to fix YouTube message error, added ads references, changes to bool

5 files changed, 35 insertions, 7 deletions

diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss
index 96438483..2f89b858 100644
--- a/demo/src/sass/bundles/demo.scss
+++ b/demo/src/sass/bundles/demo.scss
@@ -34,8 +34,13 @@
 @import '../components/icons';
 @import '../components/links';
 @import '../components/lists';
+@import '../components/media';
 @import '../components/navigation';
 @import '../components/players';
 
 // Plyr
 @import '../../../../src/sass/plyr';
+
+// Utils
+@import '../utilities/cosmetic';
+@import '../utilities/hidden';
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index 25780b41..b2930862 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -42,4 +42,8 @@ a {
     &.tab-focus {
         @include tab-focus();
     }
+
+    &.no-border::after {
+        display: none;
+    }
 }
diff --git a/demo/src/sass/utilities/color.scss b/demo/src/sass/components/media.scss
index 786e6ccb..c6744bcc 100644
--- a/demo/src/sass/utilities/color.scss
+++ b/demo/src/sass/components/media.scss
@@ -1,11 +1,10 @@
 // ==========================================================================
-// Color
+// Basic media
 // ==========================================================================
 
-.color--vimeo {
-    color: $color-vimeo;
-}
-
-.color--youtube {
-    color: $color-youtube;
+img,
+video,
+audio {
+    max-width: 100%;
+    vertical-align: middle;
 }
diff --git a/demo/src/sass/utilities/cosmetic.scss b/demo/src/sass/utilities/cosmetic.scss
new file mode 100644
index 00000000..91374d9d
--- /dev/null
+++ b/demo/src/sass/utilities/cosmetic.scss
@@ -0,0 +1,7 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+.no-border {
+    border: 0;
+}
diff --git a/demo/src/sass/utilities/hidden.scss b/demo/src/sass/utilities/hidden.scss
index a48b107a..665bfd76 100644
--- a/demo/src/sass/utilities/hidden.scss
+++ b/demo/src/sass/utilities/hidden.scss
@@ -5,3 +5,16 @@
 [hidden] {
     display: none;
 }
+
+// Hide only visually, but have it available for screen readers: h5bp.com/v
+.sr-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    opacity: 0.001;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}