Fix object-fit on some browsers

css/videolayout_default.css

@@ -41,20 +41,22 @@
     background-size: contain;
     border-radius:1px;
     border: 1px solid #212425;
-    /*margin-right: 1px;*/
+    /**
+      * 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:hover,*/
 #remoteVideos .videocontainer.videoContainerFocused {
     cursor: hand;
-    /* transform:scale(1.08, 1.08);
-    -webkit-transform:scale(1.08, 1.08); */
     transition-duration: 0.5s;
     -webkit-transition-duration: 0.5s;
     -webkit-animation-name: greyPulse;
     -webkit-animation-duration: 2s;
     -webkit-animation-iteration-count: 1;
-    overflow: visible !important;
 }
 
 #remoteVideos .videocontainer:hover {
@@ -82,6 +84,7 @@
     cursor: hand;
     border-radius:1px;
     object-fit: cover;
+    overflow: hidden;
 }
 
 .flipVideoX {