PB-265: Video background for Banner

- fix video preview on stage and storefront

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_default.less

@@ -27,6 +27,13 @@
         width: 100%;
         z-index: -1;
     }
+
+    [id*='jarallax-container'] {
+        video,
+        iframe {
+            visibility: hidden;
+        }
+    }
 }
 
 .video-overlay {

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/banner/preview.js

@@ -116,6 +116,14 @@ export default class Preview extends BasePreview {
                         videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
                     },
                 );
+                // @ts-ignore
+                this.wrapper.jarallax.video.on("started", () => {
+                    // @ts-ignore
+                    if (this.wrapper.jarallax.$video) {
+                        // @ts-ignore
+                        this.wrapper.jarallax.$video.style.visibility = "visible";
+                    }
+                });
             });
         }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js

@@ -96,6 +96,14 @@ export default class Preview extends PreviewCollection {
                         videoLazyLoading: (this.contentType.dataStore.get("video_lazy_load") as string) === "true",
                     },
                 );
+                // @ts-ignore
+                this.element.jarallax.video.on("started", () => {
+                    // @ts-ignore
+                    if (this.element.jarallax.$video) {
+                        // @ts-ignore
+                        this.element.jarallax.$video.style.visibility = "visible";
+                    }
+                });
             });
         }
 

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/banner/preview.ts

@@ -40,5 +40,12 @@
             top: 0;
             z-index: -99;
         }
+
+        [id*='jarallax-container'] {
+            video,
+            iframe {
+                visibility: hidden;
+            }
+        }
     }
 }

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts

@@ -29,5 +29,10 @@ define([
             videoLazyLoading: $element.data('videoLazyLoad'),
             disableVideo: false
         });
+        $element[0].jarallax.video.on('started', function () {
+            if ($element[0].jarallax.$video) {
+                $element[0].jarallax.$video.style.visibility = 'visible';
+            }
+        });
     };
 });