diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index f3348f0371..1810957dd0 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/dashboard-ui/css/mediaplayer.css @@ -135,6 +135,10 @@ margin-top: -115px; } +#videoPlayer.aspect43 { + margin-top: -163px; +} + #videoPlayer.fullscreenVideo, .fullscreenVideo .itemVideo { position: fixed !important; @@ -402,6 +406,16 @@ ss} margin-left: -250px; margin-top: -160px; } + + .aspect43 .itemVideo:not(.fullscreenVideo) { + width: 440px; + margin-left: -220px; + } + + #videoPlayer.aspect43 { + margin-left: -230px; + margin-top: -208px; + } } @media (min-width: 800px) and (min-height: 450px) { @@ -415,6 +429,16 @@ ss} margin-left: -330px; margin-top: -205px; } + + .aspect43 .itemVideo:not(.fullscreenVideo) { + width: 560px; + margin-left: -280px; + } + + #videoPlayer.aspect43 { + margin-left: -290px; + margin-top: -253px; + } } @media (min-width: 960px) and (min-height: 540px) { @@ -428,6 +452,16 @@ ss} margin-left: -370px; margin-top: -228px; } + + .aspect43 .itemVideo:not(.fullscreenVideo) { + width: 640px; + margin-left: -320px; + } + + #videoPlayer.aspect43 { + margin-left: -330px; + margin-top: -283px; + } } @media (min-width: 1200px) and (min-height: 720px) { @@ -441,6 +475,16 @@ ss} margin-left: -550px; margin-top: -329px; } + + .aspect43 .itemVideo:not(.fullscreenVideo) { + width: 900px; + margin-left: -450px; + } + + #videoPlayer.aspect43 { + margin-left: -460px; + margin-top: -380px; + } } @media (min-width: 1440px) and (min-height: 720px) { @@ -458,6 +502,16 @@ ss} .positionSliderContainer { width: 300px; } + + .aspect43 .itemVideo:not(.fullscreenVideo) { + width: 900px; + margin-left: -450px; + } + + #videoPlayer.aspect43 { + margin-left: -460px; + margin-top: -380px; + } } .status { diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 729be638c0..ff28251c3d 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -274,6 +274,8 @@ videoPlayer.fadeIn(); + checkAspectRatio(); + }); $(".mediaFlyoutContainer").on("click", "a", function (e) { @@ -318,6 +320,21 @@ fullscreenExited = false; }; + function checkAspectRatio() { + // Resize player window if 4:3 aspect ratio + var footer = $("#footer"); + + var videoElement = $("video", footer); + + var w = $(videoElement).width(); + + var h = $(videoElement).height(); + + if (w / h < 1.7) { + $("#videoPlayer", footer).addClass("aspect43"); + } + } + function changeHandler(event) { document.addEventListener(event, function () {