diff options
-rwxr-xr-x | css/style.css | 67 | ||||
-rwxr-xr-x | js/viewer.js | 31 |
2 files changed, 55 insertions, 43 deletions
diff --git a/css/style.css b/css/style.css index 7ce812f..20f675d 100755 --- a/css/style.css +++ b/css/style.css @@ -2,36 +2,59 @@ video { outline: none; } -#videoviewer_overlay { - position:fixed; - top:0px;bottom:0px;left:0px;right:0px; - z-index:100; - background-color:#777; - background-color:rgba(119,119,119, .7); +#videoplayer_overlay { + position: fixed; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + z-index: 100; + background-color: #777; + background-color: rgba(119,119,119, .7); } -#videoviewer_popup { - position:fixed; - left:50%;top:50%; - z-index:101; +#videoplayer_outer_container { + position: fixed; + top: 50%; + left: 50%; + width: 95%; + max-width: 854px; + transform: translate(-50%, -50%); } -#videoviewer_container { - position:relative; - left:-50%; - margin-top:-40%; - padding:0; - color:#4d4d4d; - background:#fff; +#videoplayer_container { + position: relative; + width: 95%; + max-width: 854px; + margin: 0 auto; + color: #4d4d4d; + background: #fff; box-shadow: 0 0 20px #111; + z-index: 101; +} + +#videoplayer_container:before { + content: ""; + display: block; + padding-top: 56.25%; +} + +#videoplayer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } a.box-close { - position:absolute; - top:-12px;right:-12px; - width:30px;height:30px; - cursor:pointer; - background:url('../img/close.png') no-repeat 0 0; + position: absolute; + top: -12px; + right: -12px; + width: 30px; + height: 30px; + cursor: pointer; + background: url('../img/close.png') no-repeat 0 0; } diff --git a/js/viewer.js b/js/viewer.js index 157c4a6..42b7fd9 100755 --- a/js/viewer.js +++ b/js/viewer.js @@ -2,40 +2,29 @@ var videoViewer = { UI : { playerTemplate : '<header><link href="'+OC.filePath('files_videosPlayer', 'videojs', 'src')+'/video-js.css" rel="stylesheet"><script src="'+OC.filePath('files_videosPlayer', 'videojs', 'src')+'/video.js"></script>' + '<script>' + '_V_.options.flash.swf = "'+OC.filePath('files_videosPlayer', 'videojs', 'src')+'/video-js.swf"' + - '</script>' + '</head><video id="my_video_1" class="video-js vjs-sublime-skin" controls preload="auto" width="854" height="480" poster="my_video_poster.png" data-setup="{}">' + + '</script>' + '</header><video id="my_video_1" class="video-js vjs-sublime-skin" controls preload="auto" width="100%" height="100%" poster="my_video_poster.png" data-setup="{}">' + '<source type="%type%" src="%src%" />' + '</video>', show : function () { - $('<div id="videoviewer_overlay" style="display:none;"></div><div id="videoviewer_popup"><div id="videoviewer_container"><a class="box-close" id="box-close" href="#"></a></div></div>').appendTo('body'); + $('<div id="videoplayer_overlay" style="display:none;"><div id="videoplayer_outer_container"><div id="videoplayer_container"><div id="videoplayer"><a class="box-close" id="box-close" href="#"></a></div></div></div></div>').appendTo('body'); - $('#videoviewer_overlay').fadeIn('fast',function(){ - $('#videoviewer_popup').fadeIn('fast'); + $('#videoplayer_overlay').fadeIn('fast',function(){ + $('#videoplayer_container').fadeIn('fast'); }); $('#box-close').click(videoViewer.hidePlayer); - var size = videoViewer.UI.getSize(); - var playerView = videoViewer.UI.playerTemplate.replace(/%width%/g, size.width) - .replace(/%height%/g, size.height) + var playerView = videoViewer.UI.playerTemplate .replace(/%type%/g, videoViewer.mime) .replace(/%src%/g, videoViewer.location) ; - $(playerView).prependTo('#videoviewer_container'); + $(playerView).prependTo('#videoplayer'); }, hide : function() { - $('#videoviewer_popup').fadeOut('fast', function() { - $('#videoviewer_overlay').fadeOut('fast', function() { - $('#videoviewer_popup').remove(); - $('#videoviewer_overlay').remove(); + $('#videoplayer_container').fadeOut('fast', function() { + $('#videoplayer_overlay').fadeOut('fast', function() { + $('#videoplayer_container').remove(); + $('#videoplayer_overlay').remove(); }); }); - }, - getSize : function () { - var size; - if ($(document).width()>'680' && $(document).height()>'520' ){ - size = {width: 640, height: 480}; - } else { - size = {width: 320, height: 240}; - } - return size; } }, mime : null, |