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

6 files changed, 36 insertions, 12 deletions

diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
index 164cfe7d..0fb06a11 100644
--- a/demo/src/js/demo.js
+++ b/demo/src/js/demo.js
@@ -52,11 +52,7 @@ document.addEventListener('DOMContentLoaded', () => {
             google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
         },
         ads: {
-            tag:
-                'https://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480',
-            // Test tags
-            // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=',
-            // tag: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=',
+            enabled: true,
         },
     });
 
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;
+}