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

Fullscreen fixes

Browse Source
This commit is contained in:
Sam Potts 2016-01-11 00:07:13 +11:00
parent 9b09c9c7a0
commit 7d077d543b
4 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

8
src/js/plyr.js
View File

@ -1431,12 +1431,16 @@
// Play media
function _play() {
plyr.media.play();
if('play' in plyr.media) {
plyr.media.play();
}
}
// Pause media
function _pause() {
plyr.media.pause();
if('pause' in plyr.media) {
plyr.media.pause();
}
}
// Toggle playback

47
src/less/plyr.less
View File

@ -624,41 +624,42 @@
video {
height: 100%;
}
.plyr-video-wrapper {
.plyr__video-wrapper {
height: 100%;
width: 100%;
}
.plyr-controls {
.plyr__controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
}
// Hide controls when playing in full screen
&--fullscreen--hide-controls.plyr--playing {
.plyr__controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
}
&.plyr--hover .plyr__controls {
transform: translateY(0);
}
.plyr__captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
// Hide controls when playing in full screen
&--fullscreen--hide-controls.plyr--playing {
.plyr__controls {
transform: translateY(100%) translateY(@control-spacing / 2);
transition: transform .3s .2s ease;
}
&.plyr--hover .plyr__controls {
transform: translateY(0);
}
.plyr__captions {
bottom: (@control-spacing / 2);
transition: bottom .3s .2s ease;
}
}
// Captions
.plyr__captions,
&--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions {
top: auto;
bottom: 90px;
// Captions
&--fullscreen .plyr__captions,
&--fullscreen-active .plyr__captions,
&--fullscreen--hide-controls.plyr--playing.plyr--hover .plyr__captions {
top: auto;
bottom: 90px;
@media (min-width: @bp-control-split) {
bottom: 60px;
}
@media (min-width: @bp-control-split) {
bottom: 60px;
}
}