ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Full screen improvements, tweaked examples

Browse Source
This commit is contained in:
Sam Potts
2015-02-15 14:35:30 +11:00
parent 21c20614d5
commit 0190e161b6
12 changed files with 95 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
assets/less/docs.less
View File

@ -8,21 +8,21 @@
@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-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;
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!
@ -38,9 +38,7 @@ body {
.font-size(18);
color: #6D797F;
line-height: 1.5;
background: #ECF0F1;
max-width: 960px;
margin: 40px auto;
background: #fff;
text-align: center;
}
h1 {
@ -56,5 +54,20 @@ p {
margin: 0 0 20px;
}
header {
margin-bottom: 40px;
margin: 40px 0;
}
.example-audio .player,
.example-video .player {
margin: 0 auto;
&:fullscreen {
max-width: none;
}
}
.example-audio .player {
max-width: 480px;
}
.example-video .player {
max-width: 1200px;
}

36
assets/less/simple-media.less
View File

@ -89,6 +89,7 @@
.player {
position: relative;
max-width: 100%;
min-width: 290px;
overflow: hidden; // For the controls
background: #000;
@ -141,11 +142,18 @@
line-height: 1;
// Layout
&-playback {
float: left;
}
&-sound {
float: right;
display: inline-block;
margin-top: @control-spacing;
}
@media (min-width: 560px) {
&-playback {
float: left;
}
&-sound {
float: right;
margin-top: 0;
}
}
input + label,
@ -327,15 +335,25 @@
// Full screen mode
&:fullscreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
.player-video {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
height: 100%;
width: 100%;
video {
height: 100%;
}
.player-captions {
top: auto;
bottom: 80px;
}
}
.player-controls {
position: absolute;