diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/js/plyr.js | 17 | ||||
| -rw-r--r-- | assets/less/plyr.less | 25 |
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 |