haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix object-fit: cover not supported for video

This commit is contained in:
yanas 2016-08-01 22:09:17 -05:00
parent 9a25db34aa
commit db0c4e95f7
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/videolayout_default.css
View File

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