Parcourir la source

Fix object-fit: cover not supported for video

j8
yanas il y a 8 ans
Parent
révision
db0c4e95f7
1 fichiers modifiés avec 8 ajouts et 5 suppressions
  1. 8
    5
      css/videolayout_default.css

+ 8
- 5
css/videolayout_default.css Voir le fichier

@@ -40,21 +40,23 @@
40 40
     background-color: black;
41 41
     background-size: contain;
42 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 50
     border: 1px solid #212425;
44
-    /*margin-right: 1px;*/
45 51
 }
46 52
 
47
-/*#remoteVideos .videocontainer:hover,*/
48 53
 #remoteVideos .videocontainer.videoContainerFocused {
49 54
     cursor: hand;
50
-    /* transform:scale(1.08, 1.08);
51
-    -webkit-transform:scale(1.08, 1.08); */
52 55
     transition-duration: 0.5s;
53 56
     -webkit-transition-duration: 0.5s;
54 57
     -webkit-animation-name: greyPulse;
55 58
     -webkit-animation-duration: 2s;
56 59
     -webkit-animation-iteration-count: 1;
57
-    overflow: visible !important;
58 60
 }
59 61
 
60 62
 #remoteVideos .videocontainer:hover {
@@ -82,6 +84,7 @@
82 84
     cursor: hand;
83 85
     border-radius:1px;
84 86
     object-fit: cover;
87
+    overflow: hidden;
85 88
 }
86 89
 
87 90
 .flipVideoX {

Chargement…
Annuler
Enregistrer