From 40c0a97e7b4ec5aad5549669f1481f5b257652d0 Mon Sep 17 00:00:00 2001 From: MaZderMind Date: Fri, 27 Feb 2015 19:59:23 +0100 Subject: Video-Player placement & fixes --- assets/css/_mejs_hacks.less | 96 ++++++++++++++++++++++++++++++++++ assets/css/_room.less | 8 +-- assets/css/_structure.less | 1 + assets/js/lustiges-script.js | 4 ++ template/assemblies/player/video.phtml | 2 +- template/page.phtml | 8 +-- 6 files changed, 110 insertions(+), 9 deletions(-) create mode 100644 assets/css/_mejs_hacks.less diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less new file mode 100644 index 0000000..32767a8 --- /dev/null +++ b/assets/css/_mejs_hacks.less @@ -0,0 +1,96 @@ +.mejs-container { + .mejs-subs-line { + position: absolute; + bottom: 50px; + height: 85px; + width: 100%; + background-color: fade(white, 85%); + color: black; + font-size: 65px; + text-align: center; + opacity: 0; + display: none; + padding: 5px 0; + overflow: hidden; + + .silence { + font-size: 49%; + opacity: 0; + display: none; + color: #555; + } + &.silence .silence { opacity: 1; display: block; } + + .error { + color: red; + opacity: 0; + display: none; + } + &.error .error { opacity: 1; display: block; } + } + + .mejs-controls { + @factor: 1.5; + visibility: visible !important; + + .mejs-subs-button > span { + cursor: pointer; + color: #e3e3e3; + font-size: 28px; + padding-top: 5px; + padding-left: 5px; + } + + height: 12px + 18px * @factor; + div { + width: 26px * @factor; + height: 26px * @factor; + } + .mejs-button button { + background-size: 144px * @factor 32px * @factor !important; + width: 16px * @factor; + height: 16px * @factor; + } + .mejs-playpause-button { + &.mejs-play button { + background-position: 0 0; + } + &.mejs-pause button { + background-position: 0 -16px * @factor; + } + } + .mejs-volume-button { + &.mejs-mute button { + background-position: -16px * @factor -16px * @factor; + } + &.mejs-unmute button { + background-position: -16px * @factor 0; + } + .mejs-volume-slider { + left: 4px * @factor; + } + } + .mejs-fullscreen-button button { + background-position: -32px * @factor 0; + } + + @top: @factor * 12px - 12px; + .mejs-time { + padding-top: @top + 8px; + } + .mejs-horizontal-volume-slider { + width: 110px; + top: @top; + .mejs-horizontal-volume-total { + width: 100px; + } + } + } + + &.mejs-audio { + margin: 0 auto; + } + .mejs-overlay-loading { + background: none !important; + } +} diff --git a/assets/css/_room.less b/assets/css/_room.less index 3bb9d81..a0a9bdf 100644 --- a/assets/css/_room.less +++ b/assets/css/_room.less @@ -1,7 +1,3 @@ -video, audio { - display: block; -} - .tab-content { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; @@ -23,3 +19,7 @@ video, audio { .player-wrap { margin-bottom: 60px; } + +.video-wrap { + margin: 0 auto; +} diff --git a/assets/css/_structure.less b/assets/css/_structure.less index 970425d..ae4dcca 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -1,5 +1,6 @@ @import "fa/font-awesome.less"; @import "_bootstrap-selection.less"; +@import "_mejs_hacks.less"; @import "_footer.less"; @img: '../img/'; diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js index accedb9..ffd1e95 100644 --- a/assets/js/lustiges-script.js +++ b/assets/js/lustiges-script.js @@ -160,6 +160,10 @@ $(function() { $('audio').mediaelementplayer({ features: ['playpause', 'volume', 'current'] }); + + $(window).on('load', function() { + $(window).trigger('resize'); + }); }); diff --git a/template/assemblies/player/video.phtml b/template/assemblies/player/video.phtml index 0955492..1508aba 100644 --- a/template/assemblies/player/video.phtml +++ b/template/assemblies/player/video.phtml @@ -1,4 +1,4 @@ -
+