diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 8e97dcf87..b926eead6 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -40,21 +40,23 @@ background-color: black; background-size: contain; border-radius: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; border: 1px solid #212425; - /*margin-right: 1px;*/ } -/*#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 {