[FIX] website: the media video create by the media editor is not display in firefox. change the css to display the video and add z-index to the div for edit mode

2 files changed, 9 insertions, 3 deletions

diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index 209d431ae8f..453a10df793 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -503,12 +503,15 @@ div.media_iframe_video {
 div.media_iframe_video iframe {
   width: 100%;
   height: 100%;
+  position: absolute;
+  margin-left: -50%;
 }
-div.media_iframe_video div {
+div.media_iframe_video .css_editable_mode_display {
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
+  z-index: 2;
 }
 
 /* Mobile view */
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index a9707799177..f67dcbcbbde 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -88,7 +88,7 @@ header
 /* ----- EDITOR ----- */
 
 .css_non_editable_mode_hidden
-    display: none
+    display: none !important
 
 /* ----- BOOTSTRAP FIX ----- */
 
@@ -413,11 +413,14 @@ div.media_iframe_video
     iframe
         width: 100%
         height: 100%
-    div
+        position: absolute
+        margin-left: -50%
+    .css_editable_mode_display
         position: absolute
         width: 100%
         height: 100%
         display: none
+        z-index: 2
 
 /* Mobile view */