Docs tweaks

docs/index.html

@@ -21,7 +21,7 @@
                 <ul>
                     <li>
                         <a href="https://github.com/selz/plyr" target="_blank" class="btn btn-primary" data-shr-network="github">
-                            <svg class="icon"><use xlink:href="#icon-github"/></svg>Get it on GitHub
+                            <svg class="icon"><use xlink:href="#icon-github"/></svg>Download on GitHub
                         </a>
                     </li>
                     <li>

docs/src/js/docs.js

@@ -57,6 +57,7 @@ shr.setup({
             case 'video':
                 player.source({
                     type:       'video',
+                    title: 		'Bug Buck Bunny',
                     sources: [{ 
                         src:    'https://cdn.selz.com/plyr/1.0/movie.mp4',
                         type:   'video/mp4'
@@ -79,6 +80,7 @@ shr.setup({
             case 'audio':
                 player.source({
                     type:       'audio',
+                    title: 		'96 by Logistics',
                     sources: [{ 
                         src:    'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
                         type:   'audio/mp3'
@@ -93,6 +95,7 @@ shr.setup({
             case 'youtube':
                 player.source({
                     type:       'youtube',
+                    title: 		'Introducing Apple Pencil',
                     sources:    'iicnVez5U7M'
                 });
                 break;
@@ -100,6 +103,7 @@ shr.setup({
             case 'vimeo':
                 player.source({
                     type:       'vimeo',
+                    title: 		'The Beaten Track',
                     sources:    '125220818'
                 });
                 break;

docs/src/less/components/buttons.less

@@ -96,13 +96,12 @@ nav {
 	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
-	transition: all .3s ease;
+	transition: background .3s ease, border .3s ease, color .3s ease;
 
 	&:hover,
 	&:focus {
-		background-color: #fff;
+		border-color: darken(@gray-light, 8%);
-		border-color: darken(@gray-light, 5%);
+		color: @gray;
-		color: @link-color;
 		outline: 0;
 	}
 	&-youtube .icon {

docs/src/less/components/examples.less

@@ -5,6 +5,7 @@
 // Example players
 .player {
     margin: 0 auto @padding-base;
+    max-width: @example-width-video;
 
     &-controls {
         border-radius: 0 0 @border-radius-base @border-radius-base;
@@ -21,11 +22,6 @@
         overflow: hidden;
     }
 }
-.player-video,
-.player-youtube,
-.player-vimeo {
-    max-width: @example-width-video;
-}
 video,
 .player-video-embed {
     border-radius: @border-radius-base;

src/js/plyr.js

@@ -1790,20 +1790,6 @@
             _updateProgress(event);
         }
 
-        // Remove <source> children and src attribute
-        /*function _removeSources() {
-            // Find child <source> elements
-            var sources = player.media.querySelectorAll('source');
-
-            // Remove each
-            for (var i = sources.length - 1; i >= 0; i--) {
-                _remove(sources[i]);
-            }
-
-            // Remove src attribute
-            player.media.removeAttribute('src');
-        }*/
-
         // Add a source element
         function _addSource(attributes) {
             _insertElement('source', player.media, attributes);
@@ -1949,7 +1935,12 @@
                 if (config.autoplay) {
                     _play();
                 } 
-            }        
+            } 
+
+            if('title' in source) {
+                config.title = source.title;
+                _setupPlayAria();
+            }       
         }
 
         // Update poster