Просмотр исходного кода

Fix object-fit on some browsers

master
yanas 8 лет назад
Родитель
Сommit
fd836560aa
1 измененных файлов: 8 добавлений и 5 удалений
  1. 8
    5
      css/videolayout_default.css

+ 8
- 5
css/videolayout_default.css Просмотреть файл

41
     background-size: contain;
41
     background-size: contain;
42
     border-radius:1px;
42
     border-radius:1px;
43
     border: 1px solid #212425;
43
     border: 1px solid #212425;
44
-    /*margin-right: 1px;*/
44
+    /**
45
+      * Some browsers don't have full support of the object-fit property for the
46
+      * video element and when we set video object-fit to "cover" the video
47
+      * actually overflows the boundaries of its container, so it's important
48
+      * to indicate that the "overflow" should be hidden.
49
+      */
50
+    overflow: hidden;
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 {

Загрузка…
Отмена
Сохранить