浏览代码

Fix object-fit: cover not supported for video

j8
yanas 8 年前
父节点
当前提交
db0c4e95f7
共有 1 个文件被更改,包括 8 次插入5 次删除
  1. 8
    5
      css/videolayout_default.css

+ 8
- 5
css/videolayout_default.css 查看文件

40
     background-color: black;
40
     background-color: black;
41
     background-size: contain;
41
     background-size: contain;
42
     border-radius:1px;
42
     border-radius:1px;
43
+    /**
44
+     * Some browsers don't have full support of the object-fit property for the
45
+     * video element and when we set video object-fit to "cover" the video
46
+     * actually overflows the boundaries of its container, so it's important
47
+     * to indicate that the "overflow" should be hidden.
48
+     */
49
+    overflow: hidden;
43
     border: 1px solid #212425;
50
     border: 1px solid #212425;
44
-    /*margin-right: 1px;*/
45
 }
51
 }
46
 
52
 
47
-/*#remoteVideos .videocontainer:hover,*/
48
 #remoteVideos .videocontainer.videoContainerFocused {
53
 #remoteVideos .videocontainer.videoContainerFocused {
49
     cursor: hand;
54
     cursor: hand;
50
-    /* transform:scale(1.08, 1.08);
51
-    -webkit-transform:scale(1.08, 1.08); */
52
     transition-duration: 0.5s;
55
     transition-duration: 0.5s;
53
     -webkit-transition-duration: 0.5s;
56
     -webkit-transition-duration: 0.5s;
54
     -webkit-animation-name: greyPulse;
57
     -webkit-animation-name: greyPulse;
55
     -webkit-animation-duration: 2s;
58
     -webkit-animation-duration: 2s;
56
     -webkit-animation-iteration-count: 1;
59
     -webkit-animation-iteration-count: 1;
57
-    overflow: visible !important;
58
 }
60
 }
59
 
61
 
60
 #remoteVideos .videocontainer:hover {
62
 #remoteVideos .videocontainer:hover {
82
     cursor: hand;
84
     cursor: hand;
83
     border-radius:1px;
85
     border-radius:1px;
84
     object-fit: cover;
86
     object-fit: cover;
87
+    overflow: hidden;
85
 }
88
 }
86
 
89
 
87
 .flipVideoX {
90
 .flipVideoX {

正在加载...
取消
保存