diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
index c9ed3fd21..9aefe9e46 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.js
@@ -40,8 +40,8 @@ export const DraggableEditorView = Marionette.View.extend({
   render() {
     ReactDOM.render(
       <DraggableEditor
-        imageSrc={this.options.file.getBackgroundPositioningImageUrl()}
-        portrait={this.options.file.get('width') < this.options.file.get('height')}
+        imageSrc={this.options.file?.getBackgroundPositioningImageUrl()}
+        portrait={this.options.file && this.options.file.get('width') < this.options.file.get('height')}
         indicatorColor={paletteColor(this.model.get(this.getPropertyName('color')) || this.model.get('color'))}
         initialMode={this.model.get(this.getPropertyName('mode'))}
         initialPoints={this.model.get(this.getPropertyName('outline'))}
@@ -135,9 +135,11 @@ function DraggableEditor({
       </div>
 
       <div className={styles.wrapper}>
-        <img className={classNames(styles.image, {[styles.portraitImage]: portrait})}
-             src={imageSrc}
-             alt={I18n.t(`${i18nPrefix}.hotspots_image`)} />
+        {imageSrc ?
+         <img className={classNames(styles.image, {[styles.portraitImage]: portrait})}
+              src={imageSrc}
+              alt={I18n.t(`${i18nPrefix}.hotspots_image`)} /> :
+         <div className={classNames(styles.image, styles.placeholderImage)} />}
         <div ref={ref}
              className={styles.overlay}
              onMouseMove={event => dispatch({type: MOUSE_MOVE, cursor: clientToPercent(event)})}>
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
index b91ca58c8..274995ba0 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/EditAreaDialogView/DraggableEditorView.module.css
@@ -73,6 +73,11 @@
   margin-right: 6px;
 }
 
+.placeholderImage {
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+}
+
 .image {
   display: block;
   height: calc(100vh - 250px);
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
index 5f00d7d6b..0103cce09 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
@@ -50,7 +50,7 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.input('invertTooltips', CheckBoxInputView);
       this.input('enablePanZoom', SelectInputView, {
-        values: ['phonePlatform', 'always', 'never']
+        values: ['never', 'phonePlatform', 'always']
       });
       this.view(SeparatorView);
       this.input('enableFullscreen', CheckBoxInputView, {
@@ -60,10 +60,6 @@ editor.contentElementTypes.register('hotspots', {
       });
       this.group('ContentElementPosition');
     });
-  },
-
-  defaultConfig: {
-    enablePanZoom: 'phonePlatform'
   }
 });
 
diff --git a/entry_types/scrolled/package/src/frontend/global.module.css b/entry_types/scrolled/package/src/frontend/global.module.css
index f47dba4dd..48c552d75 100644
--- a/entry_types/scrolled/package/src/frontend/global.module.css
+++ b/entry_types/scrolled/package/src/frontend/global.module.css
@@ -22,5 +22,5 @@
 
 :global [data-floating-ui-portal] {
   position: relative;
-  z-index: 30000;
+  z-index: 1000;
 }