Commit 48dd051f authored by Jonas Heinrich's avatar Jonas Heinrich

fix custom videoplayer fullscreen styling

parent 76b23ee3
...@@ -45,16 +45,31 @@ button { ...@@ -45,16 +45,31 @@ button {
.vid-wrapper.mouse-entered .vid-quality-selector, .vid-wrapper.paused .vid-quality-selector { .vid-wrapper.mouse-entered .vid-quality-selector, .vid-wrapper.paused .vid-quality-selector {
opacity: 1; opacity: 1;
visibility: hidden; } visibility: hidden; }
.vid-wrapper .vid-html5 { .videre-container.is-fullscreen {
position: relative; background-color: black;
z-index: 1; } position: fixed;
.vid-wrapper .vid-html5 video { left: 0;
display: block; right: 0;
background-color: black; } top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1000000000000000000;
}
.vid-wrapper.is-fullscreen video {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.vid-wrapper .vid-controls-bottom { .vid-wrapper .vid-controls-bottom {
z-index: 2; z-index: 2;
position: absolute; position: absolute;
bottom: 5px; bottom: 20px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 60px; height: 60px;
...@@ -118,7 +133,6 @@ button { ...@@ -118,7 +133,6 @@ button {
pointer-events: none; pointer-events: none;
z-index: 2; z-index: 2;
opacity: 0; opacity: 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100 */
background: transparent; background: transparent;
background: -moz-linear-gradient(top, transparent 50%, #000000 90%); background: -moz-linear-gradient(top, transparent 50%, #000000 90%);
background: -webkit-linear-gradient(top, transparent 50%, #000000 90%); background: -webkit-linear-gradient(top, transparent 50%, #000000 90%);
...@@ -219,9 +233,13 @@ button { ...@@ -219,9 +233,13 @@ button {
height: 100%; height: 100%;
background-color: white; } background-color: white; }
video::-webkit-media-controls { video {
display: none !important; }
video[poster] {
object-fit: cover; object-fit: cover;
width: 100%;
} }
video::-webkit-media-controls {
display: none !important;
}
/*# sourceMappingURL=videre.css.map */
//
if (typeof Object.create !== "function") { if (typeof Object.create !== "function") {
Object.create = function (obj) { Object.create = function (obj) {
function F() {} function F() {}
...@@ -8,7 +7,8 @@ if (typeof Object.create !== "function") { ...@@ -8,7 +7,8 @@ if (typeof Object.create !== "function") {
} }
(function ($, window, document) { (function ($, window, document) {
currentVolumeIcon = null;
currentVolumeIcon = null;
function kFormat ( num ) { function kFormat ( num ) {
if ( num >= 1000000 ) { if ( num >= 1000000 ) {
...@@ -26,11 +26,17 @@ if (typeof Object.create !== "function") { ...@@ -26,11 +26,17 @@ if (typeof Object.create !== "function") {
var Video = { var Video = {
init : function (options, el) { init : function (options, el) {
var base = this; var base = this;
el = el[0]; el = el[0];
base.options = $.extend({}, $.fn.videre.options, options); base.options = $.extend({}, $.fn.videre.options, options);
var base = this; var base = this;
base.decodeMedia(el); base.decodeMedia(el);
var screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {
base.isFullscreen();
});
}, },
decodeMedia : function (el) { decodeMedia : function (el) {
...@@ -94,25 +100,27 @@ if (typeof Object.create !== "function") { ...@@ -94,25 +100,27 @@ if (typeof Object.create !== "function") {
$('.vid-toggle-layer').unbind().click(function(){ $('.vid-toggle-layer').unbind().click(function(){
base.togglePlay(); base.togglePlay();
}).dblclick(function(){ }).dblclick(function(){
/* instead of media.requestFullscreen(); */
if ( media.requestFullscreen ) { if ( media.requestFullscreen ) {
media.requestFullscreen(); player.requestFullscreen();
} else if ( media.mozRequestFullScreen ) { } else if ( media.mozRequestFullScreen ) {
media.mozRequestFullScreen(); player.mozRequestFullScreen();
} else if ( media.webkitRequestFullscreen ) { } else if ( media.webkitRequestFullscreen ) {
media.webkitRequestFullscreen(); player.webkitRequestFullscreen();
}; };
base.isFullscreen();
}); });
$('.vid-request-fullscreen').unbind().click(function(){ $('.vid-request-fullscreen').unbind().click(function(){
/* instead of media.requestFullscreen(); */
if ( media.requestFullscreen ) { if ( media.requestFullscreen ) {
media.requestFullscreen(); player.requestFullscreen();
} else if ( media.mozRequestFullScreen ) { } else if ( media.mozRequestFullScreen ) {
media.mozRequestFullScreen(); player.mozRequestFullScreen();
} else if ( media.webkitRequestFullscreen ) { } else if ( media.webkitRequestFullscreen ) {
media.webkitRequestFullscreen(); player.webkitRequestFullscreen();
}; };
base.isFullscreen();
}); });
...@@ -246,40 +254,36 @@ if (typeof Object.create !== "function") { ...@@ -246,40 +254,36 @@ if (typeof Object.create !== "function") {
isFullscreen : function () { isFullscreen : function () {
var base = this; var base = this;
if (!window.screenTop && !window.screenY) { if ($('.vid-wrapper').hasClass('is-fullscreen')) {
$('.vid-wrapper').addClass('is-fullscreen'); // if not fullscreen
$('.vid-wrapper button.vid-request-fullscreen i').removeClass('.ion-android-expand').addClass('ion-arrow-shrink')
base.exitFullscreen();
} else {
// if not fullscreen
$('.vid-wrapper button.vid-request-fullscreen i').addClass('.ion-android-expand').removeClass('ion-arrow-shrink') $('.vid-wrapper button.vid-request-fullscreen i').addClass('.ion-android-expand').removeClass('ion-arrow-shrink')
$('.vid-wrapper').removeClass('is-fullscreen'); $('.vid-wrapper').removeClass('is-fullscreen');
} else {
$('.vid-wrapper').addClass('is-fullscreen');
$('.vid-wrapper button.vid-request-fullscreen i').removeClass('.ion-android-expand').addClass('ion-arrow-shrink')
base.exitFullscreen();
}; };
}, },
exitFullscreen : function ( ) { exitFullscreen : function ( ) {
$('.vid-request-fullscreen').click(function(){ $('.vid-request-fullscreen').click(function(){
if (media.exitFullscreen) { if (document.exitFullscreen) {
media.exitFullscreen(); document.exitFullscreen();
} else if (media.webkitExitFullscreen) { } else if (document.mozCancelFullScreen) {
media.webkitExitFullscreen(); document.mozCancelFullScreen();
} else if (media.mozCancelFullScreen) { } else if (document.webkitExitFullscreen) {
media.mozCancelFullScreen(); document.webkitExitFullscreen();
} else if (media.msExitFullscreen) { }
media.msExitFullscreen();
};
}); });
$('.vid-toggle-layer').dblclick(function(){ $('.vid-toggle-layer').dblclick(function(){
if (media.exitFullscreen) { if (document.exitFullscreen) {
media.exitFullscreen(); document.exitFullscreen();
} else if (media.webkitExitFullscreen) { } else if (document.mozCancelFullScreen) {
media.webkitExitFullscreen(); document.mozCancelFullScreen();
} else if (media.mozCancelFullScreen) { } else if (document.webkitExitFullscreen) {
media.mozCancelFullScreen(); document.webkitExitFullscreen();
} else if (media.msExitFullscreen) { }
media.msExitFullscreen();
};
}); });
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment