Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| df64fdac9e | |||
| 4dbbbd04cc | |||
| c9c3ee9014 | |||
| 67191c2a75 | |||
| 8ba4522b3e | |||
| 52eaf62b58 | |||
| 8d43f412ac | |||
| e9ea90f527 | |||
| 5dc0d84300 | |||
| ec8923ef08 | |||
| 5a414572f9 | |||
| 7f40307b0a | |||
| a12485d10f | |||
| 4695bbf483 | |||
| 20ee77a55e | |||
| 78a0ac8674 |
@ -17,7 +17,7 @@
|
|||||||
"dist/plyr.js",
|
"dist/plyr.js",
|
||||||
"dist/sprite.svg",
|
"dist/sprite.svg",
|
||||||
"src/less/plyr.less",
|
"src/less/plyr.less",
|
||||||
"src/sass/plyr.sass",
|
"src/sass/plyr.scss",
|
||||||
"src/js/plyr.js"
|
"src/js/plyr.js"
|
||||||
],
|
],
|
||||||
"ignore": [
|
"ignore": [
|
||||||
@ -30,4 +30,4 @@
|
|||||||
"url": "git://github.com/selz/plyr.git"
|
"url": "git://github.com/selz/plyr.git"
|
||||||
},
|
},
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,14 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## v1.2.2
|
||||||
|
- Fix for :focus keyboard vs mouse (Fixes #61)
|
||||||
|
- Fix for caption positioning in full screen (Fixes #92)
|
||||||
|
|
||||||
|
## v1.2.1
|
||||||
|
- Tooltip bug fix
|
||||||
|
|
||||||
## v1.2.0
|
## v1.2.0
|
||||||
- Added YouTube support.
|
- Added YouTube support
|
||||||
|
|
||||||
## v1.1.13
|
## v1.1.13
|
||||||
- Added icon prefix option for when using default controls
|
- Added icon prefix option for when using default controls
|
||||||
|
|||||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.css
vendored
2
docs/dist/docs.css
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/docs.js
vendored
2
docs/dist/docs.js
vendored
File diff suppressed because one or more lines are too long
@ -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.2.0/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.2.2/docs.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
@ -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="https://cdn.plyr.io/1.2.0/plyr.css?1">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/plyr.css?1">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/docs.css?2">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/docs.css?4">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -92,18 +92,18 @@
|
|||||||
a.send();
|
a.send();
|
||||||
a.onload = function(){
|
a.onload = function(){
|
||||||
var c = d.createElement("div");
|
var c = d.createElement("div");
|
||||||
c.style.display="none";
|
c.setAttribute("hidden", "");
|
||||||
c.innerHTML = a.responseText;
|
c.innerHTML = a.responseText;
|
||||||
b.insertBefore(c, b.childNodes[0]);
|
b.insertBefore(c, b.childNodes[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})(document, "https://cdn.plyr.io/1.2.0/sprite.svg");
|
})(document, "https://cdn.plyr.io/1.2.2/sprite.svg");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="https://cdn.plyr.io/1.2.0/plyr.js?1"></script>
|
<script src="https://cdn.plyr.io/1.2.2/plyr.js?1"></script>
|
||||||
|
|
||||||
<!-- Docs script -->
|
<!-- Docs script -->
|
||||||
<script src="https://cdn.plyr.io/1.2.0/docs.js?1"></script>
|
<script src="https://cdn.plyr.io/1.2.2/docs.js?1"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -10,6 +10,7 @@ plyr.setup({
|
|||||||
volume: 9,
|
volume: 9,
|
||||||
title: "Video demo",
|
title: "Video demo",
|
||||||
html: templates.controls.render({}),
|
html: templates.controls.render({}),
|
||||||
|
tooltips: true,
|
||||||
captions: {
|
captions: {
|
||||||
defaultActive: true
|
defaultActive: true
|
||||||
},
|
},
|
||||||
|
|||||||
@ -8,13 +8,19 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Hidden
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
// Base
|
// Base
|
||||||
html {
|
html {
|
||||||
|
height: 100%;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
background: linear-gradient(#fff, @body-background) fixed;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
background: @body-background;
|
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: @gray;
|
color: @gray;
|
||||||
|
|||||||
@ -123,7 +123,7 @@ nav {
|
|||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
padding: ((@padding-base / 2) - 1px);
|
padding: ((@padding-base / 2) - 1px);
|
||||||
background: @body-background;
|
background: #fff;
|
||||||
border: 1px solid @gray-light;
|
border: 1px solid @gray-light;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "1.2.0",
|
"version": "1.2.2",
|
||||||
"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",
|
||||||
|
|||||||
19
readme.md
19
readme.md
@ -3,19 +3,19 @@ A simple, accessible HTML5 media player.
|
|||||||
|
|
||||||
[Checkout the demo](http://plyr.io)
|
[Checkout the demo](http://plyr.io)
|
||||||
|
|
||||||
[](http://plyr.io)
|
[](http://plyr.io)
|
||||||
|
|
||||||
## Why?
|
## Why?
|
||||||
We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
|
We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
- **Accessible** - full support for captions and screen readers.
|
- **Accessible** - full support for captions and screen readers.
|
||||||
- **Lightweight** - just 6.4KB minified and gzipped.
|
- **Lightweight** - just 7.5KB minified and gzipped.
|
||||||
- **[Customisable](#html)** - make the player look how you want with the markup you want.
|
- **[Customisable](#html)** - 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.
|
||||||
- **Audio & Video** - support for both formats.
|
- **Audio & Video** - support for both formats.
|
||||||
- **[Embed](#embed)** - support for YouTube (Vimeo soon).
|
- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
|
||||||
- **[API](#api)** - toggle playback, volume, seeking, and more.
|
- **[API](#api)** - toggle playback, volume, seeking, and more.
|
||||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
||||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||||
@ -39,7 +39,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.2.0/plyr.js` to `https://cdn.plyr.io/1.2.0/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.2.2/plyr.js` to `https://cdn.plyr.io/1.2.2/plyr.js`
|
||||||
|
|
||||||
### Bower
|
### Bower
|
||||||
If bower is your thang, you can grab Plyr using:
|
If bower is your thang, you can grab Plyr using:
|
||||||
@ -59,11 +59,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
|
|||||||
If you want to use our CDN, you can use the following:
|
If you want to use our CDN, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/plyr.css">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.2/plyr.css">
|
||||||
<script src="https://cdn.plyr.io/1.2.0/plyr.js"></script>
|
<script src="https://cdn.plyr.io/1.2.2/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.0/sprite.svg`.
|
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.2/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.
|
||||||
@ -360,6 +360,9 @@ Here's a list of the methods supported:
|
|||||||
<strong>array</strong><br>
|
<strong>array</strong><br>
|
||||||
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
|
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
|
||||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||||
|
<br><br>
|
||||||
|
<strong>YouTube</strong><br>
|
||||||
|
Currently this API method only accepts a YouTube ID when used with a YouTube player. I will add URL support soon, along with being able to swap between types (e.g. YouTube to Audio or Video and vice versa.)
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v1.2.0
|
// plyr.js v1.2.2
|
||||||
// https://github.com/selz/plyr
|
// https://github.com/selz/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@ -59,7 +59,7 @@
|
|||||||
loading: "loading",
|
loading: "loading",
|
||||||
tooltip: "player-tooltip",
|
tooltip: "player-tooltip",
|
||||||
hidden: "sr-only",
|
hidden: "sr-only",
|
||||||
hover: "hover",
|
hover: "player-hover",
|
||||||
captions: {
|
captions: {
|
||||||
enabled: "captions-enabled",
|
enabled: "captions-enabled",
|
||||||
active: "captions-active"
|
active: "captions-active"
|
||||||
@ -1322,7 +1322,7 @@
|
|||||||
// Show the player controls
|
// Show the player controls
|
||||||
function _showControls() {
|
function _showControls() {
|
||||||
// Set shown class
|
// Set shown class
|
||||||
_toggleClass(player.controls, config.classes.hover, true);
|
_toggleClass(player.container, config.classes.hover, true);
|
||||||
|
|
||||||
// Clear timer every movement
|
// Clear timer every movement
|
||||||
window.clearTimeout(hoverTimer);
|
window.clearTimeout(hoverTimer);
|
||||||
@ -1330,7 +1330,7 @@
|
|||||||
// If the mouse is not over the controls, set a timeout to hide them
|
// If the mouse is not over the controls, set a timeout to hide them
|
||||||
if(!isMouseOver) {
|
if(!isMouseOver) {
|
||||||
hoverTimer = window.setTimeout(function() {
|
hoverTimer = window.setTimeout(function() {
|
||||||
_toggleClass(player.controls, config.classes.hover, false);
|
_toggleClass(player.container, config.classes.hover, false);
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1675,6 +1675,32 @@
|
|||||||
// IE doesn't support input event, so we fallback to change
|
// IE doesn't support input event, so we fallback to change
|
||||||
var inputEvent = (player.browser.name == "IE" ? "change" : "input");
|
var inputEvent = (player.browser.name == "IE" ? "change" : "input");
|
||||||
|
|
||||||
|
// Detect tab focus
|
||||||
|
function checkFocus() {
|
||||||
|
var focused = document.activeElement;
|
||||||
|
if (!focused || focused == document.body) {
|
||||||
|
focused = null;
|
||||||
|
}
|
||||||
|
else if (document.querySelector){
|
||||||
|
focused = document.querySelector(":focus");
|
||||||
|
}
|
||||||
|
for (var button in player.buttons) {
|
||||||
|
var element = player.buttons[button];
|
||||||
|
|
||||||
|
_toggleClass(element, "tab-focus", (element === focused));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
_on(window, "keyup", function(event) {
|
||||||
|
var code = (event.keyCode ? event.keyCode : event.which);
|
||||||
|
if(code == 9) { checkFocus(); }
|
||||||
|
});
|
||||||
|
for (var button in player.buttons) {
|
||||||
|
var element = player.buttons[button];
|
||||||
|
_on(element, "blur", function() {
|
||||||
|
_toggleClass(element, "tab-focus", false);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Play
|
// Play
|
||||||
_on(player.buttons.play, "click", function() {
|
_on(player.buttons.play, "click", function() {
|
||||||
_play();
|
_play();
|
||||||
|
|||||||
@ -28,7 +28,7 @@
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
@tooltip-bg: @controls-bg;
|
@tooltip-bg: @controls-bg;
|
||||||
@tooltip-color: #fff;
|
@tooltip-color: @control-color;
|
||||||
@tooltip-padding: @control-spacing;
|
@tooltip-padding: @control-spacing;
|
||||||
@tooltip-arrow-size: 5px;
|
@tooltip-arrow-size: 5px;
|
||||||
@tooltip-radius: 3px;
|
@tooltip-radius: 3px;
|
||||||
@ -331,8 +331,9 @@
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
transform: translate(-50%, (@tooltip-padding * 3));
|
transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
|
||||||
transition: transform .2s .2s ease, opacity .2s .2s ease;
|
transform-origin: 50% 100%;
|
||||||
|
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -350,12 +351,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
label:hover .player-tooltip,
|
label:hover .player-tooltip,
|
||||||
input:focus + label .player-tooltip,
|
input.tab-focus:focus + label .player-tooltip,
|
||||||
button:hover .player-tooltip,
|
button:hover .player-tooltip,
|
||||||
button:focus .player-tooltip {
|
button.tab-focus:focus .player-tooltip {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0) scale(1);
|
||||||
}
|
}
|
||||||
label:hover .player-tooltip,
|
label:hover .player-tooltip,
|
||||||
button:hover .player-tooltip {
|
button:hover .player-tooltip {
|
||||||
@ -595,16 +596,7 @@
|
|||||||
.player-video-wrapper {
|
.player-video-wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
.player-captions {
|
|
||||||
top: auto;
|
|
||||||
bottom: 90px;
|
|
||||||
|
|
||||||
@media (min-width: @bp-control-split) {
|
|
||||||
bottom: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.player-controls {
|
.player-controls {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -613,13 +605,29 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Hide controls when playing in full screen
|
// Hide controls when playing in full screen
|
||||||
&.fullscreen-hide-controls.playing .player-controls {
|
&.fullscreen-hide-controls.playing {
|
||||||
transform: translateY(100%) translateY(@control-spacing / 2);
|
.player-controls {
|
||||||
transition: transform .3s .2s ease;
|
transform: translateY(100%) translateY(@control-spacing / 2);
|
||||||
|
transition: transform .3s .2s ease;
|
||||||
&.hover {
|
}
|
||||||
|
&.player-hover .player-controls {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
.player-captions {
|
||||||
|
bottom: (@control-spacing / 2);
|
||||||
|
transition: bottom .3s .2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Captions
|
||||||
|
.player-captions,
|
||||||
|
&.fullscreen-hide-controls.playing.player-hover .player-captions {
|
||||||
|
top: auto;
|
||||||
|
bottom: 90px;
|
||||||
|
|
||||||
|
@media (min-width: @bp-control-split) {
|
||||||
|
bottom: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -28,7 +28,7 @@ $control-bg-hover: @blue !default;
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
$tooltip-bg: $controls-bg !default;
|
$tooltip-bg: $controls-bg !default;
|
||||||
$tooltip-color: #fff !default;
|
$tooltip-color: $control-color !default;
|
||||||
$tooltip-padding: $control-spacing !default;
|
$tooltip-padding: $control-spacing !default;
|
||||||
$tooltip-arrow-size: 5px !default;
|
$tooltip-arrow-size: 5px !default;
|
||||||
$tooltip-radius: 3px !default;
|
$tooltip-radius: 3px !default;
|
||||||
@ -329,8 +329,9 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
transform: translate(-50%, ($tooltip-padding * 3));
|
transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
|
||||||
transition: transform .2s .2s ease, opacity .2s .2s ease;
|
transform-origin: 50% 100%;
|
||||||
|
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
@ -353,7 +354,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
button:focus .player-tooltip {
|
button:focus .player-tooltip {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, 0);
|
transform: translate(-50%, 0) scale(1);
|
||||||
}
|
}
|
||||||
label:hover .player-tooltip,
|
label:hover .player-tooltip,
|
||||||
button:hover .player-tooltip {
|
button:hover .player-tooltip {
|
||||||
@ -593,15 +594,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
.player-video-wrapper {
|
.player-video-wrapper {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.player-captions {
|
|
||||||
top: auto;
|
|
||||||
bottom: 90px;
|
|
||||||
|
|
||||||
@media (min-width: $bp-control-split) {
|
|
||||||
bottom: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.player-controls {
|
.player-controls {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -611,13 +603,29 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Hide controls when playing in full screen
|
// Hide controls when playing in full screen
|
||||||
&.fullscreen-hide-controls.playing .player-controls {
|
&.fullscreen-hide-controls.playing {
|
||||||
transform: translateY(100%) translateY($control-spacing / 2);
|
.player-controls {
|
||||||
transition: transform .3s .2s ease;
|
transform: translateY(100%) translateY($control-spacing / 2);
|
||||||
|
transition: transform .3s .2s ease;
|
||||||
&.hover {
|
}
|
||||||
|
&.player-hover .player-controls {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
.player-captions {
|
||||||
|
bottom: (@control-spacing / 2);
|
||||||
|
transition: bottom .3s .2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Captions
|
||||||
|
.player-captions,
|
||||||
|
&.fullscreen-hide-controls.playing.player-hover .player-captions {
|
||||||
|
top: auto;
|
||||||
|
bottom: 90px;
|
||||||
|
|
||||||
|
@media (min-width: $bp-control-split) {
|
||||||
|
bottom: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user