Fix for Bootstrap compatibility

Fixes #6

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "keywords": [

changelog.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v1.0.14
+- Minor change for bootstrap compatibility
+
+## v1.0.13
+- Minor tweaks
+
+## v1.0.12
+- Handle native events (Issue #34)
+
+## v1.0.11
+- Bug fixes for fullscreen mode
+
+## v1.0.10
+- Bower includes src files now
+- Folder re-arrangement
+
 ## v1.0.9
 - Added buffer progress bar
 - Fixed Safari 8 caption track (it needs to be removed from the DOM like in Safari 7)

dist/css/docs.css

@@ -1 +1 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}
+/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}a.logo{border:0}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}footer{margin-bottom:20px}footer p{margin-bottom:10px}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../src/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../src/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../src/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}

index.html

@@ -20,17 +20,17 @@
 
 		<section class="example-video">
 			<div class="player">
-				<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls crossorigin>
+				<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
 					<!-- Video files -->
-					<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
-					<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
+					<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+					<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
 					
 					<!-- Text track file -->
-					<track kind="captions" label="English" srclang="en" src="//cdn.sampotts.me/plyr/movie_en_captions.vtt" default>
+					<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
 					
 					<!-- Fallback for browsers that don't support the <video> element -->
 					<div>
-						<a href="//cdn.sampotts.me/plyr/movie.mp4">Download</a>
+						<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
 					</div>
 				</video>
 			</div>
@@ -41,18 +41,25 @@
 			<div class="player">
 				<audio controls>
 					<!-- Audio files -->
-					<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
-					<source src="//cdn.sampotts.me/plyr/logistics-96-sample.ogg" type="application/ogg">
+					<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+					<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
 					
 					<!-- Fallback for browsers that don't support the <audio> element -->
 					<div>
-						<a href="//cdn.sampotts.me/plyr/logistics-96-sample.mp3">Download</a>
+						<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
 					</div>
 				</audio>
 			</div>
 			<small>"96" by Logistics, which can be purchased from <a href="https://www.hospitalrecords.com/shop/artist/logistics" target="_blank">Hospital Records</a>.</small>
 		</section>
 
+		<footer>
+			<p>Used by &hellip;</p>
+			<a href="https://selz.com" target="_blank" class="logo">
+				<img src="https://d33i624pw6jj68.cloudfront.net/static/img/logos/selz.svg" alt="Selz">
+			</a>
+		</footer>
+
 		<!-- Load SVG defs -->
 		<script>
 		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"dist/sprite.svg");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plyr",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "description": "A simple HTML5 media player using custom controls",
   "homepage": "http://plyr.io",
   "main": "gulpfile.js",

readme.md

@@ -70,19 +70,17 @@ and the AJAX technique here:
 The only extra markup that's needed to use plyr is a `<div>` wrapper. Replace the source, poster and captions with urls for your media.
 ```html
 <div class="player">
-	<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls crossorigin>
+	<video poster="//cdn.selz.com/plyr/1.0/poster.jpg" controls crossorigin>
 		<!-- Video files -->
-		<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
-		<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
+		<source src="//cdn.selz.com/plyr/1.0/movie.mp4" type="video/mp4">
+		<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
 		
 		<!-- Text track file -->
-		<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions_en.vtt" srclang="en" default>
+		<track kind="captions" label="English captions" src="//cdn.selz.com/plyr/1.0/movie_captions_en.vtt" srclang="en" default>
 		
 		<!-- Fallback for browsers that don't support the <video> element -->
 		<div>
-			<a href="//cdn.sampotts.me/plyr/movie.mp4">
-				<img src="//cdn.sampotts.me/plyr/poster.jpg" alt="Download">
-			</a>
+			<a href="//cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
 		</div>
 	</video>
 </div>
@@ -93,11 +91,12 @@ And the same for `<audio>`
 <div class="player">
 	<audio controls>
 		<!-- Audio files -->
-		<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
+		<source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3" type="audio/mp3">
+    <source src="//cdn.selz.com/plyr/1.0/logistics-96-sample.ogg" type="audio/ogg">
 		
 		<!-- Fallback for browsers that don't support the <audio> element -->
 		<div>
-			<a href="//cdn.sampotts.me/plyr/logistics-96-sample.mp3">Download</a>
+			<a href="//cdn.selz.com/plyr/1.0/logistics-96-sample.mp3">Download</a>
 		</div>
 	</audio>
 </div>
@@ -298,11 +297,12 @@ Any unsupported browsers will display links to download the media if the correct
 If you find anything weird with Plyr, please let us know using the Github issues tracker.
 
 ## Author
-This was created by Sam Potts ([@sam_potts](https://twitter.com/sam_potts))
+Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([sampotts.me](http://sampotts.me))
 
 ## Useful links and credits
 Credit to the PayPal HTML5 Video player from which Plyr's caption functionality is ported from:
 - [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)
+- The icons used in Plyr are [Vicons](https://dribbble.com/shots/1663443-60-Vicons-Free-Icon-Set) plus some ones I made
 
 Also these links helped created Plyr:
 - [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)

src/less/docs.less

@@ -100,6 +100,9 @@ a {
 	&:focus {
 		.tab-focus();
 	}
+	&.logo {
+		border: 0;
+	}
 }
 .btn {
 	display: inline-block;
@@ -110,6 +113,7 @@ a {
 	.font-smoothing(on);
 	font-weight: 600;
 	border-radius: 3px;
+	user-select: none;
 	
 	&:hover,
 	&:focus {
@@ -135,6 +139,15 @@ a {
 	}
 }
 
+// Footer
+footer {
+	margin-bottom: @padding-base;
+
+	p {
+		margin-bottom: (@padding-base / 2);
+	}
+}
+
 // Fonts
 // Last to not block rendering
 @import "docs/fontface.less";

src/less/plyr.less

@@ -306,7 +306,9 @@
 
 	// Volume control
 	// <input[type='range']> element
-	&-volume {
+	// Specificty is for bootstrap compatibility
+	&-volume[type=range] {
+		display: inline-block;
 		vertical-align: middle;
 		-webkit-appearance: none;
 		-moz-appearance: none;