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
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 // Play media
function _play() { function _play() {
plyr.media.play(); if('play' in plyr.media) {
plyr.media.play();
}
} }
// Pause media // Pause media
function _pause() { function _pause() {
plyr.media.pause(); if('pause' in plyr.media) {
plyr.media.pause();
}
} }
// Toggle playback // Toggle playback

47
src/less/plyr.less
View File

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