PB-265: Video background for Banner

- fix safari z-index
- fix inline edit

Author: omiroshnichenko

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

@@ -116,6 +116,11 @@
 .pagebuilder-banner-wrapper {
     .pagebuilder-overlay {
         padding: 30px;
+        position: relative;
+    }
+
+    .video-overlay {
+        z-index: 0;
     }
 }
 

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/poster/preview.html

@@ -19,10 +19,10 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style" />
+        <scope args="getUploader().getUiComponent()">
+            <render />
+        </scope>
         <div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
-            <scope args="getUploader().getUiComponent()">
-                <render />
-            </scope>
             <div class="pagebuilder-poster-content">
                 <div class="pagebuilder-banner-text-content">
                     <div if="isWysiwygSupported()"

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/banner/_default.less

@@ -32,6 +32,7 @@
             -webkit-transition: background-color 500ms ease;
             box-sizing: border-box;
             padding: 30px;
+            position: relative;
             transition: background-color 500ms ease;
 
             &.pagebuilder-poster-overlay {
@@ -45,6 +46,12 @@
             }
         }
 
+        &.jarallax {
+            .video-overlay {
+                z-index: 0;
+            }
+        }
+
         [data-element='content'] {
             min-height: 50px;
             overflow: auto;