diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 378036d89..aa3943f52 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -41,13 +41,6 @@ background-size: contain; border-radius:1px; border: 1px solid #212425; - /** - * Some browsers don't have full support of the object-fit property for the - * video element and when we set video object-fit to "cover" the video - * actually overflows the boundaries of its container, so it's important - * to indicate that the "overflow" should be hidden. - */ - overflow: hidden; } #remoteVideos .videocontainer.videoContainerFocused { diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index f0611ee48..2351e3637 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -21,6 +21,8 @@ function LocalVideo(VideoLayout, emitter) { return APP.conference.getMyUserId(); } }); + this.initBrowserSpecificProperties(); + SmallVideo.call(this, VideoLayout); } diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index 487c90cb0..62e28e4eb 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -27,6 +27,9 @@ RemoteVideo.prototype.constructor = RemoteVideo; RemoteVideo.prototype.addRemoteVideoContainer = function() { this.container = RemoteVideo.createContainer(this.videoSpanId); + + this.initBrowserSpecificProperties(); + if (APP.conference.isModerator) { this.addRemoteVideoMenu(); } diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 27279cb75..dce35c271 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -528,4 +528,25 @@ SmallVideo.prototype.waitForResolutionChange = function() { }; }; +/** + * Initalizes any browser specific properties. Currently sets the overflow + * property for Qt browsers on Windows to hidden, thus fixing the following + * problem: + * Some browsers don't have full support of the object-fit property for the + * video element and when we set video object-fit to "cover" the video + * actually overflows the boundaries of its container, so it's important + * to indicate that the "overflow" should be hidden. + * + * Setting this property for all browsers will result in broken audio levels, + * which makes this a temporary solution, before reworking audio levels. + */ +SmallVideo.prototype.initBrowserSpecificProperties = function() { + + var userAgent = window.navigator.userAgent; + if (userAgent.indexOf("QtWebEngine") > -1 + && userAgent.indexOf("Windows") > -1) { + $('#' + this.videoSpanId).css("overflow", "hidden"); + } +}; + export default SmallVideo;