Fixing display issues in IE

- Added class hooks for media type
- Returning plyr instances when calling .setup()

2 files changed, 15 insertions, 27 deletions

diff --git a/assets/js/plyr.js b/assets/js/plyr.js
index c594b36c..76d2beba 100644
--- a/assets/js/plyr.js
+++ b/assets/js/plyr.js
@@ -41,7 +41,9 @@
 			seekTime: 			".player-seek-time"
 		},
 		classes: {
-			videoContainer:		"player-video",
+			video:				"player-video",
+			videoWrapper: 		"player-video-wrapper",
+			audio:				"player-audio",
 			stopped: 			"stopped",
 			playing: 			"playing",
 			muted: 				"muted",
@@ -410,20 +412,23 @@
 				return false;
 			}
 
-			// If there's no autoplay attribute, assume the video is stopped
-			_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
-
 			// Remove native video controls
 			player.media.removeAttribute("controls");
 
-			// Set type
+			// Set media type
 			player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
 
+			// Add type class
+			_toggleClass(player.container, config.classes[player.type], true);
+
+			// If there's no autoplay attribute, assume the video is stopped and add state class
+			_toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
+
 			// Inject the player wrapper
 			if(player.type === "video") {
 				// Create the wrapper div
 				var wrapper = document.createElement("div");
-				wrapper.setAttribute("class", config.classes.videoContainer);
+				wrapper.setAttribute("class", config.classes.videoWrapper);
 
 				// Wrap the video in a container
 				_wrap(player.media, wrapper);
diff --git a/assets/less/plyr.less b/assets/less/plyr.less
index 17f14bdd..bd1696e5 100644
--- a/assets/less/plyr.less
+++ b/assets/less/plyr.less
@@ -54,7 +54,6 @@
 	outline-offset: 1px;
 }
 
-
 // Range styling
 // ---------------------------------------
 .range-thumb() {
@@ -104,10 +103,9 @@
 	}
 
 	// For video
-	&-video {
+	&-video-wrapper {
 		position: relative;
 	}
-
 	video {
 		width: 100%;
 		height: auto;
@@ -148,8 +146,8 @@
 
 		// Layout
 		&-sound {
-			display: inline-block;
-			margin-top: @control-spacing;
+			display: block;
+			margin: @control-spacing auto 0;
 		}
 		@media (min-width: 560px) {
 			&-playback {
@@ -350,7 +348,7 @@
 		width: 100%;
 		z-index: 999999;
 
-		.player-video {
+		.player-video-wrapper {
 			height: 100%;
 			width: 100%;
 
@@ -406,19 +404,4 @@
 	&-fullscreen [data-player='fullscreen'] + label {
 		display: none !important;
 	}
-}
-
-// Fixing display for IE10+
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-	.video-controls .player-volume {
-		position: relative;
-		padding: 0;
-	}
-	.player-time {
-		margin-top: 4px;
-	}
-	.player-captions {
-		padding: 8px;
-		min-height: 36px;
-	}
 }
\ No newline at end of file