Improved experience on small screens

assets/js/simple-media.js

@@ -22,6 +22,7 @@
 
 	// Default config
 	var defaults = {
+		enabled: 				true, // /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
 		debug: 					false,
 		seekInterval: 			10,
 		volume: 				5,
@@ -866,6 +867,11 @@
 		// Extend the default options with user specified
 		config = extend(defaults, options);
 
+		// If enabled carry on
+		if(!config.enabled) {
+			return false;
+		}
+
 		// Setup the fullscreen api 
 		fullscreen = fullscreenApi();
 
@@ -888,15 +894,6 @@
 			return false;
 		}
 
-		// If smartphone or tablet, stop customization as video (and captions in latest devices) are handled natively
-		player.isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
-		if (player.isSmartphoneOrTablet) {
-			if(config.debug) {
-				console.error("Browser not suppported.");
-			}
-			return false;
-		}
-
 		// Set up aria-label for Play button with the title option
 		if (typeof(config.title) === "undefined" || !config.title.length) {
 			config.playAriaLabel = "Play";

assets/less/simple-media.less

@@ -123,10 +123,14 @@
 		padding: 20px;
 		min-height: 2.5em;
 		color: #fff;
-		font-size: 24px;
+		font-size: 16px;
 		text-shadow: 0 1px 1px rgba(0,0,0, .75);
 		text-align: center;
 		.font-smoothing();
+
+		@media (min-width: 560px) {
+			font-size: 24px;
+		}
 	}
 	&.captions-active &-captions {
 		display: block;
@@ -352,9 +356,18 @@
 			}
 			.player-captions {
 				top: auto;
+				bottom: 90px;
+
+				@media (min-width: 560px) and (max-width: 767px) {
+					bottom: 60px;
+				}
+
+				@media (min-width: 768px) {
 					bottom: 80px;
 				}
 			}
+
+		}
 		.player-controls {
 			position: absolute;
 			bottom: 0;
@@ -391,8 +404,6 @@
 	.video-controls .player-volume {
 		position: relative;
 		padding: 0;
-		//height: 8px;
-		//top: -3px;
 	}
 	.player-time {
 		margin-top: 4px;