Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d46d40fa17 | |||
| 18001e7799 | |||
| aa39aa8a58 | |||
| c7c48bbe3c | |||
| 484617e2d7 | |||
| 841cc957c9 |
@ -6,8 +6,6 @@
|
||||
// Credits: http://paypal.github.io/accessible-html5-video-player/
|
||||
// ==========================================================================
|
||||
|
||||
/*global ActiveXObject*/
|
||||
|
||||
(function (api) {
|
||||
"use strict";
|
||||
|
||||
@ -969,9 +967,11 @@
|
||||
for (var i = elements.length - 1; i >= 0; i--) {
|
||||
// Get the current element
|
||||
var element = elements[i];
|
||||
|
||||
|
||||
// Setup a player instance and add to the element
|
||||
element.plyr = new Plyr(element);
|
||||
if(typeof element.plyr === "undefined") {
|
||||
element.plyr = new Plyr(element);
|
||||
}
|
||||
|
||||
// Add to return array
|
||||
players.push(element.plyr);
|
||||
|
||||
@ -6,8 +6,6 @@
|
||||
@import "docs/normalize.less";
|
||||
// Mixins
|
||||
@import "docs/mixins.less";
|
||||
// Fonts
|
||||
@import "docs/fontface.less";
|
||||
|
||||
// Variables
|
||||
// ---------------------------------------
|
||||
@ -19,28 +17,36 @@
|
||||
|
||||
// Elements
|
||||
@link-color: @blue;
|
||||
@padding-base: 20px;
|
||||
|
||||
// Breakpoints
|
||||
@screen-md: 768px;
|
||||
|
||||
// BORDER-BOX ALL THE THINGS!
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
*, *::after, *::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Base
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
//font-size: 62.5%;
|
||||
}
|
||||
body {
|
||||
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: #fff;
|
||||
.font-size(16);
|
||||
//.font-size(16);
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
color: #6D797F;
|
||||
}
|
||||
|
||||
// Type
|
||||
h1,
|
||||
h2 {
|
||||
letter-spacing: -.025em;
|
||||
color: #2E3C44;
|
||||
margin: 0 0 10px;
|
||||
margin: 0 0 (@padding-base / 2);
|
||||
line-height: 1.2;
|
||||
.font-smoothing();
|
||||
}
|
||||
@ -50,20 +56,38 @@ h1 {
|
||||
}
|
||||
p,
|
||||
small {
|
||||
margin: 0 0 20px;
|
||||
margin: 0 0 @padding-base;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
padding: 0 (@padding-base / 2);
|
||||
.font-size(14);
|
||||
}
|
||||
|
||||
// Header
|
||||
header {
|
||||
padding: 60px 0;
|
||||
margin-bottom: 20px;
|
||||
padding: @padding-base;
|
||||
margin-bottom: @padding-base;
|
||||
|
||||
p {
|
||||
.font-size(18);
|
||||
}
|
||||
@media (min-width: 560px) {
|
||||
padding-top: (@padding-base * 3);
|
||||
padding-bottom: (@padding-base * 3);
|
||||
}
|
||||
}
|
||||
|
||||
// Sections
|
||||
section {
|
||||
padding-bottom: @padding-base;
|
||||
|
||||
@media (min-width: 560px) {
|
||||
padding-bottom: (@padding-base * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Links & Buttons
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @link-color;
|
||||
@ -80,7 +104,7 @@ a {
|
||||
}
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 25px;
|
||||
padding: (@padding-base / 2) (@padding-base * 1.5);
|
||||
background: @link-color;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
@ -95,10 +119,6 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
// Players
|
||||
.example-audio .player {
|
||||
max-width: 480px;
|
||||
@ -108,10 +128,14 @@ section {
|
||||
}
|
||||
.example-audio .player,
|
||||
.example-video .player {
|
||||
margin: 0 auto 20px;
|
||||
margin: 0 auto @padding-base;
|
||||
|
||||
&:fullscreen,
|
||||
&-fullscreen {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonts
|
||||
// Last to not block rendering
|
||||
@import "docs/fontface.less";
|
||||
@ -22,10 +22,11 @@
|
||||
}
|
||||
|
||||
// Use rems for font sizing
|
||||
// Leave <body> at 100%/16px
|
||||
// ---------------------------------------
|
||||
.font-size(@font-size: 16){
|
||||
@rem: (@font-size / 10);
|
||||
font-size: @font-size * 1px;
|
||||
@rem: round((@font-size / 16), 1);
|
||||
font-size: (@font-size * 1px);
|
||||
font-size: ~"@{rem}rem";
|
||||
}
|
||||
|
||||
|
||||
@ -23,11 +23,16 @@
|
||||
|
||||
// Range
|
||||
@range-track-height: 6px;
|
||||
@range-track-bg: @gray;
|
||||
@range-thumb-height: (@range-track-height * 2);
|
||||
@range-thumb-width: (@range-track-height * 2);
|
||||
@range-thumb-bg: @control-color;
|
||||
@range-thumb-bg-focus: @control-color-active;
|
||||
|
||||
// Breakpoints
|
||||
@bp-control-split: 560px; // When controls split into left/right
|
||||
@bg-captions-large: 768px; // When captions jump to the larger font size
|
||||
|
||||
// Utility classes & mixins
|
||||
// -------------------------------
|
||||
// Screen reader only
|
||||
@ -67,7 +72,7 @@
|
||||
}
|
||||
.range-track() {
|
||||
height: @range-track-height;
|
||||
background: @gray;
|
||||
background: @range-track-bg;
|
||||
border: 0;
|
||||
border-radius: (@range-track-height / 2);
|
||||
}
|
||||
@ -123,11 +128,16 @@
|
||||
min-height: 2.5em;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-shadow: 0 1px 1px rgba(0,0,0, .75);
|
||||
font-weight: 600;
|
||||
text-shadow:
|
||||
-1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5),
|
||||
1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5),
|
||||
-1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5),
|
||||
1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5);
|
||||
text-align: center;
|
||||
.font-smoothing();
|
||||
|
||||
@media (min-width: 560px) {
|
||||
@media (min-width: @bg-captions-large) {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@ -143,13 +153,14 @@
|
||||
padding: (@control-spacing * 2) @control-spacing @control-spacing;
|
||||
background: @controls-bg;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
// Layout
|
||||
&-sound {
|
||||
display: block;
|
||||
margin: @control-spacing auto 0;
|
||||
}
|
||||
@media (min-width: 560px) {
|
||||
@media (min-width: @bp-control-split) {
|
||||
&-playback {
|
||||
float: left;
|
||||
}
|
||||
@ -192,17 +203,17 @@
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
button:hover,
|
||||
label:hover {
|
||||
background: @control-color-active;
|
||||
input:focus + label,
|
||||
button:focus {
|
||||
.tab-focus();
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
input:focus + label,
|
||||
button:focus {
|
||||
.tab-focus();
|
||||
button:hover,
|
||||
input + label:hover {
|
||||
background: @control-color-active;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
@ -359,15 +370,13 @@
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: 560px) and (max-width: 767px) {
|
||||
@media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) {
|
||||
bottom: 60px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@media (min-width: @bg-captions-large) {
|
||||
bottom: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.player-controls {
|
||||
position: absolute;
|
||||
|
||||
2
dist/css/docs.css
vendored
2
dist/css/docs.css
vendored
@ -1 +1 @@
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@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}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 25px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}
|
||||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}@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}
|
||||
2
dist/css/plyr.css
vendored
2
dist/css/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/js/plyr.js
vendored
2
dist/js/plyr.js
vendored
File diff suppressed because one or more lines are too long
13
index.html
13
index.html
@ -55,18 +55,7 @@
|
||||
|
||||
<!-- Load SVG defs -->
|
||||
<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,"dist/svg/sprite.svg");
|
||||
(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,"dist/svg/sprite.svg");
|
||||
</script>
|
||||
|
||||
<!-- Core player -->
|
||||
|
||||
Reference in New Issue
Block a user