TRI-283: добавил и настроил видео

static/css/moover/chatterbox.css

@@ -1,13 +1,10 @@
-.chatterbox {
-
-}
+.chatterbox {}
 
 .chatterbox .title {
   margin-bottom: 60px;
 }
 
 .chatterbox__slider {
-  /*max-width: 977px;*/
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -16,70 +13,6 @@
   /*padding: 50px;*/
 }
 
-
-.chatterbox__slide {
-  width: 335px;
-  height: 615px;
-  background: url("/static/img/webp/phone-border.webp") center no-repeat;
-  transition: scale 0.2s ease-in-out;
-  margin: auto;
-  position: relative;
-}
-
-.slick-slide:not(.slick-center) .chatterbox__slide {
-  scale: 0.72;
-}
-
-.slick-center .chatterbox__vicon {
-  opacity: 1;
-}
-
-
-.chatterbox__vicon {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.chatterbox__vicon::before {
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-primary);
-  border: 0;
-  border-radius: 50%;
-  transition: opacity 100ms linear;
-  
-}
-
-.chatterbox__vicon::before {
-  width: 80px;
-  height: 80px;
-}
-
-.chatterbox__vicon::before, .chatterbox__vicon::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-}
-
-.chatterbox__vicon::after {
-  border-color: transparent transparent transparent #ffffff;
-  border-style: solid;
-  border-width: 15px 0 15px 25px;
-  display: inline-block;
-  margin-left: 2px;
-}
-
 .chatterbox .slick-next {
   right: -40px;
 }
@@ -88,3 +21,97 @@
   left: -40px;
 }
 
+.chatterbox__slide {
+  width: 335px;
+  height: 615px;
+  background: url("/static/img/webp/phone-border.webp") center no-repeat;
+  transition: scale 0.2s ease-in-out;
+  margin: auto;
+  position: relative;
+}
+
+.chatterbox__wrap {
+    position: absolute;
+    /* z-index: -1; */
+    left: 8px;
+    right: 8px;
+    top: 8px;
+    bottom: 8px;
+    border-radius: 25px;
+    background-color: grey;
+    overflow: hidden;
+}
+
+.slick-slide:not(.slick-center) .chatterbox__slide {
+  scale: 0.72;
+}
+
+.slick-center .chatterbox__vbtn {
+  opacity: 1;
+  pointer-events: initial;
+  z-index: 1;
+}
+
+.chatterbox__vbtn {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+}
+
+.loaded .chatterbox__vbtn {
+ display: none;
+}
+
+.chatterbox__vbtn::before {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  border: 0;
+  border-radius: 50%;
+  transition: opacity 100ms linear;
+}
+
+.chatterbox__vbtn::before {
+  width: 80px;
+  height: 80px;
+}
+
+.chatterbox__vbtn::before, .chatterbox__vbtn::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.chatterbox__vbtn::after {
+  border-color: transparent transparent transparent #ffffff;
+  border-style: solid;
+  border-width: 15px 0 15px 25px;
+  display: inline-block;
+  margin-left: 2px;
+}
+
+.chatterbox__vbox {
+  position: relative;
+  /*z-index: -1;*/
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(100% - 16px);
+}
+
+.chatterbox video {
+  max-width: 100%;
+}
+

static/css/moover/root.css

@@ -100,3 +100,7 @@ p {
 .subtitle {
   margin-bottom: 81px;
 }
+
+.hide {
+  display: none;
+}