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

fix custom videoplayer fullscreen styling

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