diff --git a/ui/src/core_components/content/CoreVideoPlayer.vue b/ui/src/core_components/content/CoreVideoPlayer.vue
index 46fff7acb..de8a78cad 100644
--- a/ui/src/core_components/content/CoreVideoPlayer.vue
+++ b/ui/src/core_components/content/CoreVideoPlayer.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="CoreVideoPlayer">
+	<!-- Video player is intercepting events on Firefox, so we need to mask it. -->
+	<BaseMaskedComponent class="CoreVideoPlayer">
 		<video
 			:src="fields.src.value"
 			:controls="fields.controls.value === 'yes'"
@@ -7,7 +8,7 @@
 			:loop="fields.loop.value === 'yes'"
 			:muted="fields.muted.value === 'yes'"
 		></video>
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -92,6 +93,7 @@ export default {
 <script setup lang="ts">
 import { inject } from "vue";
 import injectionKeys from "../../injectionKeys";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
diff --git a/ui/src/core_components/embed/CoreGoogleMaps.vue b/ui/src/core_components/embed/CoreGoogleMaps.vue
index d876219a2..d4d241dcb 100644
--- a/ui/src/core_components/embed/CoreGoogleMaps.vue
+++ b/ui/src/core_components/embed/CoreGoogleMaps.vue
@@ -1,8 +1,8 @@
 <template>
-	<div ref="rootEl" class="CoreGoogleMaps">
+	<!-- Masking is necessary because map can intercept events, and we want the components to become interactive after selection. -->
+	<BaseMaskedComponent ref="rootEl" class="CoreGoogleMaps">
 		<div ref="mapEl" class="map" />
-		<div class="mask" />
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -86,6 +86,7 @@ export default {
 import { Ref, inject, ref, onMounted, watch, computed } from "vue";
 import injectionKeys from "../../injectionKeys";
 import { Loader } from "@googlemaps/js-api-loader";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const mapEl: Ref<HTMLElement> = ref(null);
@@ -199,7 +200,6 @@ watch(fields.mapId, initMap);
 @import "../../renderer/sharedStyles.css";
 
 .CoreGoogleMaps {
-	position: relative;
 	width: 100%;
 	height: 80vh;
 }
@@ -211,21 +211,4 @@ watch(fields.mapId, initMap);
 	margin: auto;
 	border: 1px solid var(--separatorColor);
 }
-
-.CoreGoogleMaps .mask {
-	pointer-events: none;
-}
-
-.CoreGoogleMaps.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.CoreGoogleMaps.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/core_components/embed/CoreIFrame.vue b/ui/src/core_components/embed/CoreIFrame.vue
index 3c6a911cd..858c1f841 100644
--- a/ui/src/core_components/embed/CoreIFrame.vue
+++ b/ui/src/core_components/embed/CoreIFrame.vue
@@ -1,8 +1,8 @@
 <template>
-	<div ref="rootEl" class="CoreIFrame">
+	<!-- Masking is necessary because iframes can intercept events, and we want the components to become interactive after selection. -->
+	<BaseMaskedComponent ref="rootEl" class="CoreIFrame">
 		<iframe :src="fields.src.value" draggable="false" @load="handleLoad" />
-		<div class="mask" />
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -46,6 +46,8 @@ export default {
 import { Ref, inject, ref } from "vue";
 import injectionKeys from "../../injectionKeys";
 
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
+
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
 
@@ -59,7 +61,6 @@ function handleLoad() {
 @import "../../renderer/sharedStyles.css";
 
 .CoreIFrame {
-	position: relative;
 	width: 100%;
 	height: 80vh;
 }
@@ -75,22 +76,4 @@ function handleLoad() {
 	margin: auto;
 	border: 1px solid var(--separatorColor);
 }
-
-.CoreIFrame .mask {
-	pointer-events: none;
-}
-
-.CoreIFrame.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0);
-}
-
-.CoreIFrame.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/core_components/embed/CoreMapbox.vue b/ui/src/core_components/embed/CoreMapbox.vue
index ca39b4bd5..86edcb018 100644
--- a/ui/src/core_components/embed/CoreMapbox.vue
+++ b/ui/src/core_components/embed/CoreMapbox.vue
@@ -1,8 +1,8 @@
 <template>
-	<div ref="rootEl" class="CoreMapbox">
+	<!-- Masking is necessary because map can intercept events, and we want the components to become interactive after selection. -->
+	<BaseMaskedComponent ref="rootEl" class="CoreMapbox">
 		<div ref="mapEl" class="map" />
-		<div class="mask" />
-	</div>
+	</BaseMaskedComponent>
 </template>
 
 <script lang="ts">
@@ -83,6 +83,7 @@ import "mapbox-gl/dist/mapbox-gl.css";
 import { inject, ref, watch, computed } from "vue";
 import injectionKeys from "../../injectionKeys";
 import type * as mapboxgl from "mapbox-gl";
+import BaseMaskedComponent from "../../renderer/BaseMaskedComponent.vue";
 const fields = inject(injectionKeys.evaluatedFields);
 const rootEl = ref(null);
 const mapEl = ref(null);
@@ -200,7 +201,6 @@ watch([mapEl, fields.accessToken], () => {
 
 <style scoped>
 .CoreMapbox {
-	position: relative;
 	width: 100%;
 	height: 80vh;
 }
@@ -211,20 +211,4 @@ watch([mapEl, fields.accessToken], () => {
 	width: 100%;
 	height: 100%;
 }
-.CoreMapbox .mask {
-	pointer-events: none;
-}
-
-.CoreMapbox.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-}
-
-.CoreMapbox.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/core_components/embed/CorePDF.vue b/ui/src/core_components/embed/CorePDF.vue
index 2e6c43a41..8b436c07b 100644
--- a/ui/src/core_components/embed/CorePDF.vue
+++ b/ui/src/core_components/embed/CorePDF.vue
@@ -40,7 +40,6 @@
 				/>
 			</div>
 		</div>
-		<div class="mask" />
 	</div>
 </template>
 
@@ -380,22 +379,4 @@ watch(fields.page, () => {
 	width: fit-content;
 	margin: 0 auto;
 }
-
-.CorePDF .mask {
-	pointer-events: none;
-}
-
-.CorePDF.beingEdited .mask {
-	pointer-events: auto;
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background-color: rgba(0, 0, 0, 0);
-}
-
-.CorePDF.beingEdited.selected .mask {
-	pointer-events: none;
-}
 </style>
diff --git a/ui/src/renderer/BaseMaskedComponent.vue b/ui/src/renderer/BaseMaskedComponent.vue
new file mode 100644
index 000000000..7a8a4978e
--- /dev/null
+++ b/ui/src/renderer/BaseMaskedComponent.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="BaseMaskedComponent">
+		<slot />
+		<div class="mask" />
+	</div>
+</template>
+
+<style scoped>
+.BaseMaskedComponent {
+	position: relative;
+}
+.BaseMaskedComponent .mask {
+	pointer-events: none;
+}
+
+.BaseMaskedComponent.beingEdited .mask {
+	pointer-events: auto;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.BaseMaskedComponent.beingEdited.selected .mask {
+	pointer-events: none;
+}
+</style>