Browse code

Use less complicated and more compatible css to cover background with video

Benjamin Roth authored on07/06/2019 14:28:28
Showing3 changed files
... ...
@@ -19,18 +19,15 @@
19 19
     .slick-slider-slide .slick-slider-background video,
20 20
     .slick-slider-slide .slick-slider-slide-image video {
21 21
       position: absolute;
22
-      left: -10000%;
23
-      right: -10000%;
24
-      top: -10000%;
25
-      bottom: -10000%;
26
-      margin: auto auto;
27
-      min-width: 1000%;
28
-      min-height: 1000%;
29
-      -webkit-transform: scale(0.1);
30
-      transform: scale(0.1);
22
+      top: 50%;
23
+      left: 50%;
24
+      -webkit-transform: translateX(-50%) translateY(-50%);
25
+      transform: translateX(-50%) translateY(-50%);
26
+      min-width: 100%;
27
+      min-height: 100%;
31 28
       width: auto;
32 29
       height: auto;
33
-      max-width: none; }
30
+      overflow: hidden; }
34 31
   .slick-slider-container .slide-content,
35 32
   .slick-slider-slide .slide-content {
36 33
     position: relative; }
... ...
@@ -1,6 +1,6 @@
1 1
 {
2 2
 "version": 3,
3
-"mappings": "AAAA,uBAAwB;EACtB,QAAQ,EAAE,MAAM;;AAElB;mBACoB;EAClB,QAAQ,EAAE,QAAQ;EAElB;;;+CAC0B;IACxB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,MAAM;IAEhB;;;uDAAM;MACJ,QAAQ,EAAE,QAAQ;MAClB,IAAI,EAAC,OAAO;MAAE,KAAK,EAAE,OAAO;MAC5B,GAAG,EAAE,OAAO;MAAE,MAAM,EAAE,OAAO;MAC7B,MAAM,EAAE,SAAS;MACjB,SAAS,EAAE,KAAK;MAChB,UAAU,EAAE,KAAK;MACjB,iBAAiB,EAAC,UAAU;MAC5B,SAAS,EAAE,UAAU;MACrB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,SAAS,EAAE,IAAI;EAInB;oCAAe;IACb,QAAQ,EAAE,QAAQ;EAGpB;gCAAW;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC",
3
+"mappings": "AAAA,uBAAwB;EACtB,QAAQ,EAAE,MAAM;;AAElB;mBACoB;EAClB,QAAQ,EAAE,QAAQ;EAElB;;;+CAC0B;IACxB,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,MAAM;IAEhB;;;uDAAM;MACJ,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,GAAG;MACR,IAAI,EAAE,GAAG;MACT,iBAAiB,EAAE,iCAAiC;MACpD,SAAS,EAAE,iCAAiC;MAC5C,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;MAChB,KAAK,EAAE,IAAI;MACX,MAAM,EAAE,IAAI;MACZ,QAAQ,EAAE,MAAM;EAIpB;oCAAe;IACb,QAAQ,EAAE,QAAQ;EAGpB;gCAAW;IACT,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC",
4 4
 "sources": ["slick-addons.scss"],
5 5
 "names": [],
6 6
 "file": "slick-addons.css"
... ...
@@ -16,16 +16,15 @@
16 16
 
17 17
     video {
18 18
       position: absolute;
19
-      left:-10000%; right: -10000%;
20
-      top: -10000%; bottom: -10000%;
21
-      margin: auto auto;
22
-      min-width: 1000%;
23
-      min-height: 1000%;
24
-      -webkit-transform:scale(0.1);
25
-      transform: scale(0.1);
19
+      top: 50%;
20
+      left: 50%;
21
+      -webkit-transform: translateX(-50%) translateY(-50%);
22
+      transform: translateX(-50%) translateY(-50%);
23
+      min-width: 100%;
24
+      min-height: 100%;
26 25
       width: auto;
27 26
       height: auto;
28
-      max-width: none;
27
+      overflow: hidden;
29 28
     }
30 29
   }
31 30