diff --git a/.changeset/purple-rabbits-cover.md b/.changeset/purple-rabbits-cover.md
new file mode 100644
index 000000000..f40d287a3
--- /dev/null
+++ b/.changeset/purple-rabbits-cover.md
@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': patch
+---
+
+Adjust the position of the media preview clear button.
diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
index 5ba31c4e3..aee34ff7d 100644
--- a/packages/web-forms/src/assets/styles/style.scss
+++ b/packages/web-forms/src/assets/styles/style.scss
@@ -54,7 +54,7 @@
 	--odk-max-form-width: 900px;
 
 	--odk-max-image-height: 300px;
-	--odk-image-container-size: 300px;
+	--odk-media-container-size: 300px;
 
 	--odk-spacing-s: 5px;
 	--odk-spacing-m: 10px;
diff --git a/packages/web-forms/src/components/common/media/MediaBlockBase.vue b/packages/web-forms/src/components/common/media/MediaBlockBase.vue
index c91361367..e20812a74 100644
--- a/packages/web-forms/src/components/common/media/MediaBlockBase.vue
+++ b/packages/web-forms/src/components/common/media/MediaBlockBase.vue
@@ -126,7 +126,7 @@ watchEffect(() => {
 	}
 
 	&.small-fixed {
-		max-width: var(--odk-image-container-size);
+		max-width: var(--odk-media-container-size);
 	}
 
 	&.fit-content {
@@ -134,7 +134,7 @@ watchEffect(() => {
 	}
 
 	&.broken-file {
-		max-width: var(--odk-image-container-size);
+		max-width: var(--odk-media-container-size);
 
 		img {
 			max-width: 90%;
diff --git a/packages/web-forms/src/components/form-elements/upload/UploadControl.vue b/packages/web-forms/src/components/form-elements/upload/UploadControl.vue
index 113c6a137..bbc315883 100644
--- a/packages/web-forms/src/components/form-elements/upload/UploadControl.vue
+++ b/packages/web-forms/src/components/form-elements/upload/UploadControl.vue
@@ -181,7 +181,13 @@ const onDrop = (event: DragEvent) => {
 					<template v-else>
 						<UploadFilePreview :file-name="fileName" />
 					</template>
-					<Button v-if="!isDisabled" severity="secondary" outlined class="clear-button" @click="clearValue">
+					<Button
+						v-if="!isDisabled"
+						:class="{ 'over-preview': fileType === 'image' || fileType === 'video' }"
+						severity="secondary"
+						outlined
+						class="clear-button"
+						@click="clearValue">
 						<IconSVG name="mdiClose" variant="muted" size="sm" />
 					</Button>
 				</div>
@@ -232,13 +238,23 @@ const onDrop = (event: DragEvent) => {
 }
 
 .upload-content {
+	width: fit-content;
+	min-width: min(100%, var(--odk-media-container-size));
 	display: flex;
 	align-items: center;
 	gap: var(--odk-spacing-l);
+	position: relative;
 
-	button {
+	button.clear-button:not(.over-preview) {
 		align-self: flex-start;
 	}
+
+	button.clear-button.over-preview {
+		position: absolute;
+		top: var(--odk-spacing-m);
+		right: var(--odk-spacing-m);
+		background: var(--odk-base-background-color);
+	}
 }
 
 .drag-and-drop {
diff --git a/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue b/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue
index 6461e1b9a..ca83e1cef 100644
--- a/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue
+++ b/packages/web-forms/src/components/form-elements/upload/UploadVideoPreview.vue
@@ -20,15 +20,22 @@ watchEffect(() => {
 </script>
 
 <template>
-	<div v-if="mediaUrl">
+	<div v-if="mediaUrl" class="video-container">
 		<video controls :src="mediaUrl" />
 	</div>
 </template>
 
 <style scoped lang="scss">
-video {
+.video-container {
+	background: var(--odk-muted-background-color);
 	width: 100%;
-	max-height: var(--odk-max-image-height);
+	justify-content: center;
 	border-radius: var(--odk-radius);
+
+	video {
+		width: 100%;
+		max-height: var(--odk-max-image-height);
+		border-radius: var(--odk-radius);
+	}
 }
 </style>