diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index 24cef9ef6..bfc8d227e 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/dashboard-ui/css/mediaplayer.css @@ -134,6 +134,10 @@ margin-top: -115px; } +#videoPlayer.aspect43 { + margin-top: -163px; +} + #videoPlayer.fullscreenVideo, .fullscreenVideo .itemVideo { position: fixed !important; @@ -401,6 +405,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) { @@ -414,6 +428,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) { @@ -427,6 +451,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) { @@ -440,6 +474,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) { @@ -457,6 +501,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 454c36909..af3e13860 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -278,6 +278,8 @@ videoPlayer.fadeIn(); + checkAspectRatio(); + }); $(".mediaFlyoutContainer").on("click", "a", function (e) { @@ -322,6 +324,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 () {