aboutsummaryrefslogtreecommitdiffstats
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/fonts/AvenirLTStd-Heavy.ttfbin0 -> 49936 bytes
-rw-r--r--assets/fonts/AvenirLTStd-Heavy.woffbin0 -> 28088 bytes
-rwxr-xr-xassets/fonts/AvenirLTStd-Heavy.woff2bin0 -> 21164 bytes
-rw-r--r--assets/fonts/AvenirLTStd-Medium.ttfbin0 -> 52748 bytes
-rw-r--r--assets/fonts/AvenirLTStd-Medium.woffbin0 -> 28964 bytes
-rwxr-xr-xassets/fonts/AvenirLTStd-Medium.woff2bin0 -> 22084 bytes
-rw-r--r--assets/icons/expand.svg4
-rw-r--r--assets/js/simple-media.js269
-rw-r--r--assets/less/docs.less29
-rw-r--r--assets/less/simple-media.less (renamed from assets/less/simple-player.less)215
-rw-r--r--assets/templates/controls.html8
11 files changed, 325 insertions, 200 deletions
diff --git a/assets/fonts/AvenirLTStd-Heavy.ttf b/assets/fonts/AvenirLTStd-Heavy.ttf
new file mode 100644
index 00000000..7bee7997
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Heavy.ttf
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Heavy.woff b/assets/fonts/AvenirLTStd-Heavy.woff
new file mode 100644
index 00000000..771c45a1
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Heavy.woff
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Heavy.woff2 b/assets/fonts/AvenirLTStd-Heavy.woff2
new file mode 100755
index 00000000..b889b061
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Heavy.woff2
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Medium.ttf b/assets/fonts/AvenirLTStd-Medium.ttf
new file mode 100644
index 00000000..73ec1e54
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Medium.ttf
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Medium.woff b/assets/fonts/AvenirLTStd-Medium.woff
new file mode 100644
index 00000000..bc2a778e
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Medium.woff
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Medium.woff2 b/assets/fonts/AvenirLTStd-Medium.woff2
new file mode 100755
index 00000000..bcf4649b
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Medium.woff2
Binary files differ
diff --git a/assets/icons/expand.svg b/assets/icons/expand.svg
index 9c541d48..5fd651bd 100644
--- a/assets/icons/expand.svg
+++ b/assets/icons/expand.svg
@@ -4,8 +4,8 @@
<title>expand</title>
<desc>Created with Sketch.</desc>
<defs></defs>
- <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
- <g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)" fill="#444444">
+ <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+ <g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
<path d="M7.00325,17.01 L7.00325,13.377 L8.29625,14.694 C8.68825,15.082 9.32125,15.082 9.71325,14.694 C10.10525,14.306 10.10425,13.678 9.71325,13.291 L6.74625,10.291 C6.55825,10.105 6.30425,10 6.03725,10 C6.02625,10 6.01425,10 6.00325,10.001 C5.99225,10.002 5.98025,10 5.96925,10 C5.70325,10 5.44825,10.105 5.26025,10.291 L2.29325,13.291 C1.90225,13.679 1.90225,14.307 2.29325,14.694 C2.68425,15.081 3.31825,15.082 3.71025,14.694 L5.00425,13.377 L5.00425,17.01 C5.00425,17.557 5.44725,18 5.99425,18 L6.01225,18 C6.55925,18 7.00225,17.557 7.00225,17.01 L7.00325,17.01 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(6.003438, 14.000000) rotate(-135.000000) translate(-6.003438, -14.000000) "></path>
<path d="M15.0066876,5.377 L16.2996876,6.694 C16.6916876,7.082 17.3246876,7.082 17.7166876,6.694 C18.1086876,6.306 18.1076876,5.678 17.7166876,5.291 L14.7496876,2.291 C14.5616876,2.105 14.3076876,2 14.0406876,2 C14.0296876,2 14.0176876,2 14.0066876,2.001 C13.9956876,2.002 13.9836876,2 13.9726876,2 C13.7066876,2 13.4516876,2.105 13.2636876,2.291 L10.2966876,5.291 C9.90568756,5.679 9.90568756,6.307 10.2966876,6.694 C10.6876876,7.081 11.3216876,7.082 11.7136876,6.694 L13.0076876,5.377 L13.0076876,9.01 C13.0076876,9.557 13.4506876,10 13.9976876,10 C14.5626876,10 15.0056876,9.557 15.0056876,9.01 L15.0066876,5.377 Z" id="Shape-2" sketch:type="MSShapeGroup" transform="translate(14.006875, 6.000000) rotate(45.000000) translate(-14.006875, -6.000000) "></path>
</g>
diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js
index 954cc9b2..7179cd6b 100644
--- a/assets/js/simple-media.js
+++ b/assets/js/simple-media.js
@@ -1,3 +1,77 @@
+// ==========================================================================
+// Simple Media Player
+// simple-media.js v1.0.0
+// https://github.com/sampotts/simple-media
+// ==========================================================================
+// Credits: http://paypal.github.io/accessible-html5-video-player/
+// ==========================================================================
+
+// Fullscreen API
+(function() {
+ var
+ fullscreen = {
+ supportsFullScreen: false,
+ isFullScreen: function() { return false; },
+ requestFullScreen: function() {},
+ cancelFullScreen: function() {},
+ fullScreenEventName: "",
+ element: null,
+ prefix: ""
+ },
+ browserPrefixes = "webkit moz o ms khtml".split(" ");
+
+ // check for native support
+ if (typeof document.cancelFullScreen != "undefined") {
+ fullscreen.supportsFullScreen = true;
+ }
+ else {
+ // check for fullscreen support by vendor prefix
+ for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
+ fullscreen.prefix = browserPrefixes[i];
+
+ if (typeof document[fullscreen.prefix + "CancelFullScreen" ] != "undefined" ) {
+ fullscreen.supportsFullScreen = true;
+
+ break;
+ }
+ }
+ }
+
+ // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag so set it to not supported
+ // https://bugs.webkit.org/show_bug.cgi?id=121496
+ if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
+ fullscreen.supportsFullScreen = false;
+ }
+
+ // Update methods to do something useful
+ if (fullscreen.supportsFullScreen) {
+ fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
+
+ fullscreen.isFullScreen = function() {
+ switch (this.prefix) {
+ case "":
+ return document.fullScreen;
+ case "webkit":
+ return document.webkitIsFullScreen;
+ default:
+ return document[this.prefix + "FullScreen"];
+ }
+ };
+ fullscreen.requestFullScreen = function(element) {
+ return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + "RequestFullScreen"](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+ };
+ fullscreen.cancelFullScreen = function() {
+ return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"]();
+ };
+ fullscreen.element = function() {
+ return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"];
+ };
+ }
+
+ // Export api
+ window.fullscreen = fullscreen;
+})();
+
function InitPxVideo(options) {
"use strict";
@@ -12,6 +86,37 @@ function InitPxVideo(options) {
});
}
+ // Get click position relative to parent
+ // http://www.kirupa.com/html5/getting_mouse_click_position.htm
+ // ---------------------------------
+ function getClickPosition(e) {
+ var parentPosition = window.fullscreen.isFullScreen() ? { x: 0, y: 0 } : getPosition(e.currentTarget);
+
+ return {
+ x: e.clientX - parentPosition.x,
+ y: e.clientY - parentPosition.y
+ };
+ }
+
+ // Get element position
+ // http://www.kirupa.com/html5/getting_mouse_click_position.htm
+ // ---------------------------------
+ function getPosition(element) {
+ var xPosition = 0;
+ var yPosition = 0;
+
+ while (element) {
+ xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+ yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+ element = element.offsetParent;
+ }
+
+ return {
+ x: xPosition,
+ y: yPosition
+ };
+ }
+
// Utilities for caption time codes
function video_timecode_min(tc) {
var tcpair = [];
@@ -255,6 +360,9 @@ function InitPxVideo(options) {
obj.duration = obj.container.getElementsByClassName("px-video-duration")[0];
obj.txtSeconds = obj.container.getElementsByClassName("px-seconds");
+ obj.toggleFullscreen = obj.container.querySelector("[data-player='toggle-fullscreen']");
+ obj.videoContainer = obj.container.querySelector(".player-video");
+
// Update number of seconds in rewind and fast forward buttons
obj.txtSeconds[0].innerHTML = obj.seekInterval;
obj.txtSeconds[1].innerHTML = obj.seekInterval;
@@ -265,30 +373,41 @@ function InitPxVideo(options) {
obj.isTextTracks = true;
}
- // Play
- obj.btnPlay.addEventListener("click", function() {
- obj.movie.play();
-
- obj.container.className = obj.container.className.replace("stopped", "playing");
+ // Fullscreen
+ obj.toggleFullscreen.addEventListener("click", function() {
+ if(!window.fullscreen.isFullScreen()) {
+ window.fullscreen.requestFullScreen(obj.container);
+ }
+ else {
+ window.fullscreen.cancelFullScreen();
+ }
+ }, false);
- obj.btnPlay.className = "px-video-play hide";
- obj.btnPause.className = "px-video-pause px-video-show-inline";
- obj.btnPause.focus();
+ // Click video
+ obj.videoContainer.addEventListener("click", function() {
+ if(obj.movie.paused) {
+ play();
+ }
+ else if(obj.movie.ended) {
+ restart();
+ }
+ else {
+ pause();
+ }
}, false);
- // Pause
- obj.btnPause.addEventListener("click", function() {
- obj.movie.pause();
+ function play() {
+ obj.movie.play();
+ obj.container.className = obj.container.className.replace("stopped", "playing");
+
+ }
+ function pause() {
+ obj.movie.pause();
obj.container.className = obj.container.className.replace("playing", "stopped");
+ }
- obj.btnPlay.className = "px-video-play px-video-show-inline";
- obj.btnPause.className = "px-video-pause hide";
- obj.btnPlay.focus();
- }, false);
-
- // Restart
- obj.btnRestart.addEventListener("click", function() {
+ function restart() {
// Move to beginning
obj.movie.currentTime = 0;
@@ -298,11 +417,17 @@ function InitPxVideo(options) {
}
// Play and ensure the play button is in correct state
- obj.movie.play();
- obj.btnPlay.className = "px-video-play hide";
- obj.btnPause.className = "px-video-pause px-video-show-inline";
+ play();
+ }
- }, false);
+ // Play
+ obj.btnPlay.addEventListener("click", function() { play(); obj.btnPause.focus(); }, false);
+
+ // Pause
+ obj.btnPause.addEventListener("click", function() { pause(); obj.btnPlay.focus(); }, false);
+
+ // Restart
+ obj.btnRestart.addEventListener("click", restart, false);
// Rewind
obj.btnRewind.addEventListener("click", function() {
@@ -373,7 +498,7 @@ function InitPxVideo(options) {
// Skip when clicking progress bar
obj.progressBar.addEventListener("click", function(e) {
- obj.pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
+ obj.pos = getClickPosition(e).x / this.offsetWidth;
obj.movie.currentTime = obj.pos * obj.movie.duration;
// Special handling for "manual" captions
@@ -527,101 +652,5 @@ function InitPxVideo(options) {
var tracks = obj.movie.getElementsByTagName("track");
obj.movie.removeChild(tracks[0]);
}
-
}
-};
-
-
-
-/*$(function() {
- $("video").simplePlayer();
-});*/
-
-// Simple player plugin
-// ---------------------------------
-/*;(function($) {
- $.fn.simplePlayer = function (settings) {
- // Config defaults
- var config = {
- wrapperClass: "media", // Class name added to replaced selects
- shownClass: "in",
- autoplay: false,
- templates: {
- controls: "<div class="media-controls js-media-controls"> \
- <button type="button" class="play button-toggle-play js-button-toggle-play"> \
- <span class="icon-play"></span> \
- </button> \
- <div class="progress progress-play js-progress-play" role="progress-bar"> \
- <div class="progress-buffered js-progress-buffered"></div> \
- <div class="progress-played js-progress-played"></div> \
- </div> \
- <div class="time js-time"> \
- <span class="time-elapsed js-time-elapsed">88:88</span> \
- <span class="time-seperator js-time-seperator">/</span> \
- <span class="time-total js-time-total">88:88</span> \
- </div> \
- <div class="volume has-popover js-volume"> \
- <button type="button" class="button-toggle-mute js-button-toggle-mute"> \
- <span class="icon-volume-up"></span> \
- </button> \
- <div class="popover popover-volume js-popover-volume"> \
- <div class="progress vertical-progress progress-audio-volume js-progress-audio-volume"> \
- <div class="progress-volume js-progress-volume" style="height: 80%"></div> \
- </div> \
- <div class="volume-label js-volume-label">100%</div> \
- </div> \
- </div> \
- <button type="button" class="fullscreen button-fullscreen js-button-fullscreen"> \
- <span class="icon-resize-full"></span> \
- </button> \
- </div>",
- overlay: "<div class="overlay overlay-play"><span><i class="icon-play"></i></span></div>"
- }
- };
-
- // Extend settings if they"re passed
- if (settings) {
- $.extend(config, settings);
- }
-
- this.each(function() {
- var player = this,
- status = {},
- $player = $(this).wrap("<div class="" + config.wrapperClass + (config.autoplay ? " playing" : " stopped") + "" />"),
- $wrapper = $player.parents("." + config.wrapperClass),
- supportMP4 = (function (v) { return (v.canPlayType && v.canPlayType("video/mp4")); }(document.createElement("video")));
-
- console.log($wrapper);
-
- // Inject the controls
- $(config.templates.controls).insertAfter($player);
- $(config.templates.overlay).insertAfter($player);
-
- // Select controls
- var $playbackToggle = $(".js-button-toggle-play"),
- $muteToggle = $(".js-button-toggle-mute");
-
- function togglePlayback() {
- if(status.playing && status.playing == true) {
- player.pause();
- status.playing = false;
- $wrapper.removeClass("playing").addClass("paused");
- } else {
- player.play();
- status.playing = true;
- $wrapper.removeClass("paused stopped").addClass("playing");
- }
- $("span", this).attr("class", "icon-" + (status.playing ? "pause" : "play"));
- };
-
- function toggleMute() {
- player.muted = !status.muted;
- status.muted = player.muted;
- $("span", this).attr("class", "icon-" + (status.muted ? "mute" : "volume-up"));
- };
-
- $playbackToggle.on("click", togglePlayback);
- $muteToggle.on("click", toggleMute);
- });
- };
-})(jQuery);*/ \ No newline at end of file
+} \ No newline at end of file
diff --git a/assets/less/docs.less b/assets/less/docs.less
index 05b19a48..57b4ad9e 100644
--- a/assets/less/docs.less
+++ b/assets/less/docs.less
@@ -7,6 +7,24 @@
// Mixins
@import "lib/mixins.less";
+@font-face {
+ font-family: "Avenir";
+ src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
+ url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"),
+ url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 400;
+}
+
+@font-face {
+ font-family: "Avenir";
+ src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
+ url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"),
+ url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
+ font-style: normal;
+ font-weight: 600;
+}
+
// BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {
@@ -16,22 +34,27 @@ html {
font-size: 62.5%;
}
body {
- font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
.font-size(18);
color: #6D797F;
line-height: 1.5;
background: #ECF0F1;
max-width: 960px;
- margin: 50px auto;
+ margin: 40px auto;
text-align: center;
}
h1 {
.font-size(48);
letter-spacing: -.025em;
color: #2E3C44;
- margin: 0 0 20px;
+ margin: 0 0 10px;
line-height: 1.2;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
p {
margin: 0 0 20px;
+}
+header {
+ margin-bottom: 40px;
} \ No newline at end of file
diff --git a/assets/less/simple-player.less b/assets/less/simple-media.less
index a935e09e..ec83f4e0 100644
--- a/assets/less/simple-player.less
+++ b/assets/less/simple-media.less
@@ -4,12 +4,25 @@
// Variables
// -------------------------------
-@base-color: #2E3C44;
-@green: #1ABC9C;
-@red: #D44334;
-//@green: #4CB953;
-@blue: #3498DB;
-@control-color: @blue;
+// Colors
+@base-color: #2E3C44;
+@green: #1ABC9C;
+@red: #D44334;
+@blue: #3498DB;
+
+// Grays
+@gray-dark: #343f4a;
+@gray: #565d64;
+@gray-light: #6f7e86;
+@gray-lighter: #859093;
+@gray-lightest: #cbd0d3;
+@gray-light-mega: #dadfe2;
+@off-white: #f9fafb;
+
+// Controls
+@control-color: @gray-lightest;
+@control-color-active: @blue;
+@control-spacing: 10px;
// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
@@ -51,7 +64,39 @@
position: relative;
max-width: 100%;
overflow: hidden; // For the controls
+ background: #000;
+ // For video
+ &-video {
+ position: relative;
+ }
+
+ &:fullscreen {
+ height: 100%;
+ width: 100%;
+
+ .player-video {
+ position: absolute;
+ top: 50%;
+ left: 0;
+ right: 0;
+ transform: translateY(-50%);
+ }
+ .controls {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ .icon-exit-fullscreen {
+ display: block;
+
+ & + svg {
+ display: none;
+ }
+ }
+ }
+ }
video {
width: 100%;
height: auto;
@@ -61,15 +106,34 @@
width: 18px;
height: 18px;
}
- .controls {
- .clearfix();
+ .px-video-captions {
position: absolute;
bottom: 0;
left: 0;
- right: 0;
- padding: 10px 5px;
- background: rgba(0,0,0, .75);
- transition: transform .3s ease;
+ width: 100%;
+ padding: 20px;
+ min-height: 2.5em;
+ //background-color: #000;
+ color: #fff;
+ font-size: 24px;
+ text-shadow: 0 1px 1px rgba(0,0,0, .75);
+ text-align: center;
+ //opacity: 0.75;
+
+ -webkit-font-smoothing: antialiased;
+ font-weight: 500;
+ }
+ .controls {
+ .clearfix();
+ position: relative;
+ //position: absolute;
+ //bottom: 0;
+ //left: 0;
+ //right: 0;
+ padding: (@control-spacing * 2) @control-spacing @control-spacing;
+ //background: rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .9);
+ background: @gray-dark;
+ //transition: transform .3s ease;
line-height: 1;
button {
@@ -82,8 +146,8 @@
display: inline-block;
vertical-align: middle;
margin: 0 2px;
- padding: 5px 10px;
- color: #ddd;
+ padding: (@control-spacing / 2) @control-spacing;
+ color: @control-color;
transition: background .3s ease;
border-radius: 3px;
@@ -93,22 +157,23 @@
transition: fill .3s ease;
}
&:focus {
- background: #000;
outline: 0;
}
&:hover {
- background: @control-color;
+ background: @control-color-active;
}
&:hover svg,
&:focus svg {
fill: #fff;
}
}
+ .icon-exit-fullscreen {
+ display: none;
+ }
.px-video-time {
display: inline-block;
vertical-align: middle;
- padding-top: 3px;
- margin-left: 10px;
+ margin-left: @control-spacing;
color: #fff;
font-weight: 600;
font-size: 14px;
@@ -117,24 +182,31 @@
}
progress {
position: absolute;
- top: -10px;
+ top: 0;
left: 0;
right: 0;
width: 100%;
- height: 10px;
+ height: @control-spacing;
margin: 0;
vertical-align: top;
-
+
&[value] {
/* Reset the default appearance */
-webkit-appearance: none;
border: none;
-
+ background: @gray;
+ cursor: pointer;
+
&::-webkit-progress-bar {
- background-color: #eee;
+ background: @gray;
}
+
+ // The value
&::-webkit-progress-value {
- background-color: @control-color;
+ background: @control-color-active;
+ }
+ &::-moz-progress-bar {
+ background: @control-color-active;
}
}
}
@@ -147,17 +219,55 @@
/*&.playing .controls {
transform: translateY(100%);
}*/
-}
+ .controls .px-video-pause,
+ &.playing .controls .px-video-play {
+ display: none;
+ }
+ &.playing .controls .px-video-pause {
+ display: inline-block;
+ }
-/* containers */
-.px-video-img-captions-container * {
- box-sizing: border-box;
+ /* volume range input */
+ input[type='range'] {
+ -webkit-appearance: none;
+ height: 6px;
+ width: 100px;
+ margin-right: @control-spacing;
+ background: @gray;
+ outline: 0;
+ border-radius: 10px;
+
+ &:focus::-webkit-slider-thumb {
+ //outline: 1px #999 dotted;
+ background: @control-color-active;
+ }
+ &::-moz-range-track {
+ -moz-appearance: none;
+ height: 6px;
+ background: @gray;
+ border: none;
+ border-radius: 10px;
+ }
+ &::-webkit-slider-thumb {
+ -webkit-appearance: none !important;
+ height: 12px;
+ width: 12px;
+ background: @control-color;
+ border-radius: 100%;
+ transition: background .3s ease;
+ }
+ &::-moz-range-thumb {
+ height: 12px;
+ width: 12px;
+ background: @control-color;
+ border-radius: 100%;
+ }
+ }
}
-.px-video-img-captions-container {
- position: relative;
-}
+
+/* containers */
/* progress indicator */
.px-video-progress {
@@ -173,22 +283,7 @@
}*/
/* caption area */
-.px-video-captions {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- padding: .5em;
- min-height: 2.5em;
- background-color: #000;
- color: #fff;
- font-size: 1.1em;
- text-align: center;
- opacity: 0.75;
- -webkit-font-smoothing: antialiased;
- font-weight: 500;
-}
/* buttons */
.px-video-controls button {
@@ -259,34 +354,6 @@
background-position: -6px -656px;
}
-/* volume range input */
-.px-video-controls input[type='range'] {
- -webkit-appearance: none;
- height: 6px;
- width: 100px;
- margin-top: 8px;
- background-color: #E6E6E6;
- outline:none;
-}
-.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
- outline: 1px #999 dotted;
-}
-.px-video-controls input[type='range']::-moz-range-track {
- -moz-appearance: none;
- height: 6px;
- background-color: #E6E6E6;
- border: none;
-}
-.px-video-controls input[type='range']::-webkit-slider-thumb {
- -webkit-appearance: none !important;
- height: 10px;
- width: 6px;
- background-color: #666;
-}
-.px-video-controls input[type='range']::-moz-range-thumb {
- height: 12px;
- width: 8px;
-}
/* fixing display for IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.px-video-controls input[type='range'] {
diff --git a/assets/templates/controls.html b/assets/templates/controls.html
index 2fc38196..7434f9c9 100644
--- a/assets/templates/controls.html
+++ b/assets/templates/controls.html
@@ -14,7 +14,7 @@
<svg><use xlink:href="#icon-play"></use></svg>
<span class="sr-only">Play</span>
</button>
- <button class="px-video-pause hide" data-player="pause">
+ <button class="px-video-pause" data-player="pause">
<svg><use xlink:href="#icon-pause"></use></svg>
<span class="sr-only">Pause</span>
</button>
@@ -47,5 +47,11 @@
<span class="sr-only">Captions</span>
</label>
<!--</div>-->
+
+ <button class="player-toggle-fullscreen" data-player="toggle-fullscreen">
+ <svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>
+ <svg><use xlink:href="#icon-expand"></use></svg>
+ <span class="sr-only">Toggle fullscreen</span>
+ </button>
</div>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-01 20:37:51 +0000