Compare commits

...

2 Commits

Author SHA1 Message Date
8b436276bf Fixed bug with caption toggle, hide controls in fullscreen 2015-03-22 21:26:29 +11:00
c61db87fd6 API improvements 2015-03-22 11:05:28 +11:00
10 changed files with 228 additions and 122 deletions

View File

@ -1,5 +1,15 @@
# Changelog # Changelog
## v1.0.29
- Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (Fixes #47)
- Fixed a bug with caption toggle in 1.0.28
## v1.0.28
- Added API support for browsers that don't have full plyr support (pretty much <=IE9 and `<video>` on iPhone/iPod)
## v1.0.27
- Keyboard accessibility improvements (Fixes #66)
## v1.0.26 ## v1.0.26
- Fixes for SASS (cheers @brunowego) - Fixes for SASS (cheers @brunowego)
- Indentation reset to 4 spaces - Indentation reset to 4 spaces

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.29/docs.css">
</head> </head>
<body> <body>
<main> <main>

View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.29/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.29/docs.css">
</head> </head>
<body> <body>
<header> <header>
@ -67,13 +67,29 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <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,"//cdn.plyr.io/1.0.27/sprite.svg"); (function(d, u){
var a = new XMLHttpRequest(),
b = d.body;
// Check for CORS support
// If you're loading from same domain, you can remove the if statement
if("withCredentials" in a) {
a.open("GET", u, true);
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, "https://cdn.plyr.io/1.0.29/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.27/plyr.js"></script> <script src="//cdn.plyr.io/1.0.29/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="//cdn.plyr.io/1.0.27/docs.js"></script> <script src="//cdn.plyr.io/1.0.29/docs.js"></script>
</body> </body>
</html> </html>

View File

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

View File

@ -10,7 +10,7 @@ We wanted a lightweight, accessible and customisable media player that just supp
## Features ## Features
- **Accessible** - full support for captions and screen readers. - **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 5.7KB minified and gzipped. - **Lightweight** - just 6KB minified and gzipped.
- **Customisable** - make the player look how you want with the markup you want. - **Customisable** - make the player look how you want with the markup you want.
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks. - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
- **Responsive** - as you'd expect these days. - **Responsive** - as you'd expect these days.
@ -38,7 +38,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup. Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.27/plyr.js` to `https://cdn.plyr.io/1.0.27/plyr.js` **Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.29/plyr.js` to `https://cdn.plyr.io/1.0.29/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported. If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html ```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.27/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.29/plyr.css">
<script src="//cdn.plyr.io/1.0.27/plyr.js"></script> <script src="//cdn.plyr.io/1.0.29/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.27/sprite.svg`. You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.29/sprite.svg`.
### CSS ### CSS
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@ -220,7 +220,7 @@ You can pass the following options to the setup method.
<td><code>fullscreen</code></td> <td><code>fullscreen</code></td>
<td>Object</td> <td>Object</td>
<td>&mdash;</td> <td>&mdash;</td>
<td>Two properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. Also an extra property called <code>fallback</code> which will enable a full window view for older browsers. The default value is <code>true</code>.</td> <td>Three properties; <code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. A <code>fallback</code> property which will enable a full window view for older browsers. The default value is <code>true</code>. A <code>hideControls</code> property which will hide the controls when fullscreen is active and the video is playing, after 1s. The controls reappear on hover of the progress bar (mouse), focusing a child control or pausing the video (by tap/click of video if `click` is `true`). The default value is <code>true</code>.</td>
</tr> </tr>
<tr> <tr>
<td><code>storage</code></td> <td><code>storage</code></td>
@ -359,15 +359,15 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
<td>✔</td> <td>✔</td>
<td>✔</td> <td>✔</td>
<td>✔</td> <td>✔</td>
<td>&sup2;</td> <td>API&sup2;</td>
<td>✔&sup3;</td> <td>✔&sup3;</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
&sup1; iPhone forces the native player for `<video>` so no customisation possible. `<audio>` elements have volume controls disabled. &sup1; Mobile Safari on the iPhone forces the native player for `<video>` so no useful customisation is possible. `<audio>` elements have volume controls disabled.
&sup2; Native player used (no support for `<progress>` or `<input type="range">`) &sup2; Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)
&sup3; IE10 has no native fullscreen support, fallback can be used (see options) &sup3; IE10 has no native fullscreen support, fallback can be used (see options)

View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v1.0.27 // plyr.js v1.0.29
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -55,13 +55,15 @@
loading: "loading", loading: "loading",
tooltip: "player-tooltip", tooltip: "player-tooltip",
hidden: "sr-only", hidden: "sr-only",
hover: "hover",
captions: { captions: {
enabled: "captions-enabled", enabled: "captions-enabled",
active: "captions-active" active: "captions-active"
}, },
fullscreen: { fullscreen: {
enabled: "fullscreen-enabled", enabled: "fullscreen-enabled",
active: "fullscreen-active" active: "fullscreen-active",
hideControls: "fullscreen-hide-controls"
} }
}, },
captions: { captions: {
@ -69,7 +71,8 @@
}, },
fullscreen: { fullscreen: {
enabled: true, enabled: true,
fallback: true fallback: true,
hideControls: true
}, },
storage: { storage: {
enabled: true, enabled: true,
@ -219,7 +222,7 @@
// Check for mime type support against a player instance // Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html // Credits: http://diveintohtml5.info/everything.html
// Related: http://www.leanbackplayer.com/test/h5mt.html // Related: http://www.leanbackplayer.com/test/h5mt.html
function _support(player, mimeType) { function _supportMime(player, mimeType) {
var media = player.media; var media = player.media;
// Only check video types for video players // Only check video types for video players
@ -365,9 +368,6 @@
// Toggle the checkbox // Toggle the checkbox
event.target.checked = !event.target.checked; event.target.checked = !event.target.checked;
// Set the attribute for CSS hooks
event.target[event.target.checked ? "setAttribute" : "removeAttribute"]("checked", "");
// Trigger change event // Trigger change event
_triggerEvent(event.target, "change"); _triggerEvent(event.target, "change");
} }
@ -496,7 +496,7 @@
// Seek the manual caption time and update UI // Seek the manual caption time and update UI
function _seekManualCaptions(time) { function _seekManualCaptions(time) {
// If it's not video, or we're using textTracks, bail. // If it's not video, or we're using textTracks, bail.
if (player.usingTextTracks || player.type !== "video") { if (player.usingTextTracks || player.type !== "video" || !player.supported.full) {
return; return;
} }
@ -536,7 +536,7 @@
if (config.captions.defaultActive) { if (config.captions.defaultActive) {
_toggleClass(player.container, config.classes.captions.active, true); _toggleClass(player.container, config.classes.captions.active, true);
player.buttons.captions.setAttribute("checked", ""); player.buttons.captions.checked = true;
} }
} }
@ -681,42 +681,40 @@
// Setup media // Setup media
function _setupMedia() { function _setupMedia() {
player.media = player.container.querySelectorAll("audio, video")[0];
// If there's no media, bail // If there's no media, bail
if(!player.media) { if(!player.media) {
_log("No audio or video element found!", true); _log("No audio or video element found!", true);
return false; return false;
} }
// Remove native video controls
player.media.removeAttribute("controls");
// Set media type if(player.supported.full) {
player.type = player.media.tagName.toLowerCase(); // Remove native video controls
player.media.removeAttribute("controls");
// Add type class // Add type class
_toggleClass(player.container, config.classes[player.type], true); _toggleClass(player.container, config.classes[player.type], true);
// If there's no autoplay attribute, assume the video is stopped and add state class // 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)); _toggleClass(player.container, config.classes.stopped, (player.media.getAttribute("autoplay") === null));
// Add iOS class // Add iOS class
if(player.browser.ios) { if(player.browser.ios) {
_toggleClass(player.container, "ios", true); _toggleClass(player.container, "ios", true);
} }
// Inject the player wrapper // Inject the player wrapper
if(player.type === "video") { if(player.type === "video") {
// Create the wrapper div // Create the wrapper div
var wrapper = document.createElement("div"); var wrapper = document.createElement("div");
wrapper.setAttribute("class", config.classes.videoWrapper); wrapper.setAttribute("class", config.classes.videoWrapper);
// Wrap the video in a container // Wrap the video in a container
_wrap(player.media, wrapper); _wrap(player.media, wrapper);
// Cache the container // Cache the container
player.videoContainer = wrapper; player.videoContainer = wrapper;
}
} }
// Autoplay // Autoplay
@ -886,6 +884,11 @@
else { else {
_log("Fullscreen not supported and fallback disabled."); _log("Fullscreen not supported and fallback disabled.");
} }
// Set control hide class hook
if(config.fullscreen.hideControls) {
_toggleClass(player.container, config.classes.fullscreen.hideControls, true);
}
} }
} }
@ -1027,8 +1030,15 @@
volume = 10; volume = 10;
} }
player.volume.value = volume; // If the controls are there
if(player.supported.full) {
player.volume.value = volume;
}
// Set the player volume
player.media.volume = parseFloat(volume / 10); player.media.volume = parseFloat(volume / 10);
// Update the UI
_checkMute(); _checkMute();
// Store the volume in storage // Store the volume in storage
@ -1040,29 +1050,35 @@
// Mute // Mute
function _toggleMute(muted) { function _toggleMute(muted) {
// If the method is called without parameter, toggle based on current value // If the method is called without parameter, toggle based on current value
if(typeof active === "undefined") { if(typeof muted === "undefined") {
muted = !player.media.muted; muted = !player.media.muted;
}
// If the controls are there
if(player.supported.full) {
player.buttons.mute.checked = muted; player.buttons.mute.checked = muted;
} }
// Set mute on the player
player.media.muted = muted; player.media.muted = muted;
// Update UI
_checkMute(); _checkMute();
} }
// Toggle captions // Toggle captions
function _toggleCaptions(active) { function _toggleCaptions(show) {
// If the method is called without parameter, toggle based on current value if(!player.supported.full) {
if(typeof active === "undefined") { return;
active = (player.container.className.indexOf(config.classes.captions.active) === -1);
player.buttons.captions.checked = active;
} }
if (active) { // If the method is called without parameter, toggle based on current value
_toggleClass(player.container, config.classes.captions.active, true); if(typeof show === "undefined") {
} show = (player.container.className.indexOf(config.classes.captions.active) === -1);
else { player.buttons.captions.checked = show;
_toggleClass(player.container, config.classes.captions.active);
} }
_toggleClass(player.container, config.classes.captions.active, show);
} }
// Check mute state // Check mute state
@ -1192,9 +1208,6 @@
// Restart // Restart
_seek(); _seek();
// Update the UI
_checkPlaying();
// Remove current sources // Remove current sources
_removeSources(); _removeSources();
@ -1213,8 +1226,13 @@
} }
} }
// Reset time display if(player.supported.full) {
_timeUpdate(); // Reset time display
_timeUpdate();
// Update the UI
_checkPlaying();
}
// Re-load sources // Re-load sources
player.media.load(); player.media.load();
@ -1270,7 +1288,9 @@
_on(player.buttons.fullscreen, "click", _toggleFullscreen); _on(player.buttons.fullscreen, "click", _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc // Handle user exiting fullscreen by escaping etc
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen); if(fullscreen.supportsFullScreen) {
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
}
// Time change on media // Time change on media
_on(player.media, "timeupdate seeking", _timeUpdate); _on(player.media, "timeupdate seeking", _timeUpdate);
@ -1283,6 +1303,7 @@
// Captions // Captions
_on(player.buttons.captions, "change", function() { _on(player.buttons.captions, "change", function() {
console.log(this.checked);
_toggleCaptions(this.checked); _toggleCaptions(this.checked);
}); });
@ -1330,54 +1351,71 @@
} }
}); });
} }
// Bind to mouse hover
if(config.fullscreen.hideControls) {
_on(player.controls, "mouseenter mouseleave", function(event) {
_toggleClass(player.controls, config.classes.hover, (event.type === "mouseenter"));
})
}
} }
function _init() { function _init() {
// Setup the fullscreen api // Setup the fullscreen api
fullscreen = _fullscreen(); fullscreen = _fullscreen();
// Sniff // Sniff out the browser
player.browser = _browserSniff(); player.browser = _browserSniff();
// Get the media element
player.media = player.container.querySelectorAll("audio, video")[0];
// Set media type
player.type = player.media.tagName.toLowerCase();
// Check for full support
player.supported = api.supported(player.type);
// If no native support, bail
if(!player.supported.basic) {
return false;
}
// Debug info // Debug info
_log(player.browser.name + " " + player.browser.version); _log(player.browser.name + " " + player.browser.version);
// If IE8, stop customization (use fallback)
// If IE9, stop customization (use native controls)
if (player.browser.name === "IE" && (player.browser.version === 8 || player.browser.version === 9) ) {
_log("Browser not suppported.", true);
return false;
}
// Setup media // Setup media
_setupMedia(); _setupMedia();
// Generate random number for id/for attribute values for controls // Generate random number for id/for attribute values for controls
player.random = Math.floor(Math.random() * (10000)); player.random = Math.floor(Math.random() * (10000));
// Inject custom controls // If there's full support
_injectControls(); if(player.supported.full) {
// Inject custom controls
_injectControls();
// Find the elements // Find the elements
if(!_findElements()) { if(!_findElements()) {
return false; return false;
}
// Set up aria-label for Play button with the title option
_setupAria();
// Captions
_setupCaptions();
// Set volume
_setVolume();
// Setup fullscreen
_setupFullscreen();
// Listeners
_listeners();
} }
// Set up aria-label for Play button with the title option
_setupAria();
// Captions
_setupCaptions();
// Set volume
_setVolume();
// Setup fullscreen
_setupFullscreen();
// Listeners
_listeners();
// Successful setup // Successful setup
return true; return true;
} }
@ -1399,10 +1437,42 @@
toggleCaptions: _toggleCaptions, toggleCaptions: _toggleCaptions,
source: _parseSource, source: _parseSource,
poster: _updatePoster, poster: _updatePoster,
support: function(mimeType) { return _support(player, mimeType); } support: function(mimeType) { return _supportMime(player, mimeType); }
} }
} }
// Check for support
api.supported = function(type) {
var browser = _browserSniff(),
oldIE = (browser.name === "IE" && browser.version <= 9),
iPhone = /iPhone|iPod/i.test(navigator.userAgent),
audio = !!document.createElement("audio").canPlayType,
video = !!document.createElement("video").canPlayType,
basic, full;
switch (type) {
case "video":
basic = video;
full = (basic && (!oldIE && !iPhone));
break;
case "audio":
basic = audio;
full = (basic && !oldIE);
break;
default:
basic = (audio && video);
full = (basic && !oldIE);
break;
}
return {
basic: basic,
full: full
};
}
// Expose setup function // Expose setup function
api.setup = function(options){ api.setup = function(options){
// Extend the default options with user specified // Extend the default options with user specified
@ -1410,7 +1480,7 @@
// If enabled carry on // If enabled carry on
// You may want to disable certain UAs etc // You may want to disable certain UAs etc
if(!config.enabled) { if(!config.enabled || !api.supported().basic) {
return false; return false;
} }
@ -1423,13 +1493,6 @@
// Get the current element // Get the current element
var element = elements[i]; var element = elements[i];
// Disabled for <video> for iPhone
// Since it doesn't allow customisation
if (element.querySelectorAll("audio, video")[0].tagName.toLowerCase() === "video"
&& /iPhone/i.test(navigator.userAgent)) {
continue;
}
// Setup a player instance and add to the element // Setup a player instance and add to the element
if(typeof element.plyr === "undefined") { if(typeof element.plyr === "undefined") {
// Create new instance // Create new instance
@ -1445,4 +1508,5 @@
return players; return players;
} }
}(this.plyr = this.plyr || {})); }(this.plyr = this.plyr || {}));

View File

@ -31,9 +31,9 @@
@tooltip-radius: 3px; @tooltip-radius: 3px;
// Progress // Progress
@progress-bg: lighten(@gray, 10%); @progress-bg: rgba(red(@gray), green(@gray), blue(@gray), .2);
@progress-playing-bg: @blue; @progress-playing-bg: @blue;
@progress-buffered-bg: @gray; @progress-buffered-bg: rgba(red(@gray), green(@gray), blue(@gray), .25);
@progress-loading-size: 40px; @progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15); @progress-loading-bg: rgba(0,0,0, .15);
@ -179,7 +179,7 @@
.clearfix(); .clearfix();
.font-smoothing(); .font-smoothing();
position: relative; position: relative;
padding: (@control-spacing * 2) @control-spacing @control-spacing; padding: @control-spacing;
background: @controls-bg; background: @controls-bg;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -313,7 +313,7 @@
// <progress> element // <progress> element
&-progress { &-progress {
position: absolute; position: absolute;
top: 0; bottom: 100%;
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
@ -549,6 +549,17 @@
left: 0; left: 0;
right: 0; right: 0;
} }
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s 1s ease;
&.hover {
transform: translateY(0);
transition-delay: 0;
}
}
} }
// Change icons on state change // Change icons on state change
@ -575,10 +586,4 @@
&.fullscreen-enabled [data-player='fullscreen'] + label { &.fullscreen-enabled [data-player='fullscreen'] + label {
display: inline-block; display: inline-block;
} }
// Full browser view hides toggle
&-fullscreen [data-player='fullscreen'],
&-fullscreen [data-player='fullscreen'] + label {
display: none !important;
}
} }

View File

@ -31,9 +31,9 @@ $tooltip-arrow-size: 5px;
$tooltip-radius: 3px; $tooltip-radius: 3px;
// Progress // Progress
$progress-bg: lighten($gray, 10%); $progress-bg: rgba(red($gray), green($gray), blue($gray), .2);
$progress-playing-bg: $blue; $progress-playing-bg: $blue;
$progress-buffered-bg: $gray; $progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25);
$progress-loading-size: 40px; $progress-loading-size: 40px;
$progress-loading-bg: rgba(0,0,0, .15); $progress-loading-bg: rgba(0,0,0, .15);
@ -187,7 +187,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
@include clearfix(); @include clearfix();
@include font-smoothing(); @include font-smoothing();
position: relative; position: relative;
padding: ($control-spacing * 2) $control-spacing $control-spacing; padding: $control-spacing;
background: $controls-bg; background: $controls-bg;
line-height: 1; line-height: 1;
text-align: center; text-align: center;
@ -321,7 +321,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// <progress> element // <progress> element
&-progress { &-progress {
position: absolute; position: absolute;
top: 0; bottom: 100%;
left: 0; left: 0;
right: 0; right: 0;
width: 100%; width: 100%;
@ -557,6 +557,17 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
left: 0; left: 0;
right: 0; right: 0;
} }
// Hide controls when playing in full screen
&.fullscreen-hide-controls.playing .player-controls {
transform: translateY(100%) translateY($control-spacing / 2);
transition: transform .3s 1s ease;
&.hover {
transform: translateY(0);
transition-delay: 0;
}
}
} }
// Change icons on state change // Change icons on state change