diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbb2a1fb59..80557280be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2608,6 +2608,7 @@ with gr.Blocks() as demo:
   Blocks are rendered by [@abidlabs](https://github.com/abidlabs) in [PR 2530](https://github.com/gradio-app/gradio/pull/2530)
 - Prevent invalid targets of events from crashing the whole application. [@pngwn](https://github.com/pngwn) in [PR 2534](https://github.com/gradio-app/gradio/pull/2534)
 - Properly dequeue cancelled events when multiple apps are rendered by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2540](https://github.com/gradio-app/gradio/pull/2540)
+- Fixes videos being cropped due to height/width params not being used [@hannahblair](https://github.com/hannahblair) in [PR 4946](https://github.com/gradio-app/gradio/pull/4946)
 
 ## Documentation Changes:
 
diff --git a/js/app/src/components/Video/Video.stories.svelte b/js/app/src/components/Video/Video.stories.svelte
new file mode 100644
index 0000000000..6009075a7f
--- /dev/null
+++ b/js/app/src/components/Video/Video.stories.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Video from "./Video.svelte";
+</script>
+
+<Meta
+	title="Components/Video"
+	component={Video}
+	argTypes={{
+		 video: {
+            control: "text",
+            description: "A path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.",
+			name: "value",
+        },
+        autoplay: {
+            control: [true, false],
+            description: "Whether to autoplay the video on load",
+			name: "autoplay",
+			value: true
+        }
+     }}
+/>
+
+<Template let:args>
+	<Video {...args} />
+</Template>
+
+<Story name="Primary" args={{ value:["https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4"], format:"mp4", label:"world video", show_label:true, interactive:true, autoplay: true, height: 400, width: 400 }} />
+
diff --git a/js/upload/src/utils.ts b/js/upload/src/utils.ts
index 1ec171458c..e36dddabb2 100644
--- a/js/upload/src/utils.ts
+++ b/js/upload/src/utils.ts
@@ -7,22 +7,22 @@ export function normalise_file(
 ): FileData | null;
 
 export function normalise_file(
-	file: Array<FileData> | null,
+	file: FileData[] | null,
 	root: string,
 	root_url: string | null
-): Array<FileData> | null;
+): FileData[] | null;
 
 export function normalise_file(
-	file: Array<FileData> | FileData | null,
+	file: FileData[] | FileData | null,
 	root: string,
 	root_url: string | null
-): Array<FileData> | FileData | null;
+): FileData[] | FileData | null;
 
 export function normalise_file(
-	file: Array<FileData> | FileData | string | null,
+	file: FileData[] | FileData | string | null,
 	root: string,
 	root_url: string | null
-): Array<FileData> | FileData | null {
+): FileData[] | FileData | null {
 	if (file == null) return null;
 	if (typeof file === "string") {
 		return {
@@ -30,7 +30,7 @@ export function normalise_file(
 			data: file
 		};
 	} else if (Array.isArray(file)) {
-		const normalized_file: Array<FileData | null> = [];
+		const normalized_file: (FileData | null)[] = [];
 
 		for (const x of file) {
 			if (x === null) {
@@ -40,7 +40,7 @@ export function normalise_file(
 			}
 		}
 
-		return normalized_file as Array<FileData>;
+		return normalized_file as FileData[];
 	} else if (file.is_file) {
 		if (root_url == null) {
 			file.data = root + "/file=" + file.name;
@@ -55,7 +55,7 @@ export const blobToBase64 = (blob: File): Promise<string> => {
 	const reader = new FileReader();
 	reader.readAsDataURL(blob);
 	return new Promise((resolve) => {
-		reader.onloadend = () => {
+		reader.onloadend = (): void => {
 			resolve(reader.result as string);
 		};
 	});
diff --git a/js/video/src/Player.svelte b/js/video/src/Player.svelte
index c4236f207d..7b91fa2576 100644
--- a/js/video/src/Player.svelte
+++ b/js/video/src/Player.svelte
@@ -76,6 +76,11 @@
 		dispatch("stop");
 		dispatch("end");
 	}
+
+	function open_full_screen(): void {
+		video.requestFullscreen()
+	}
+
 </script>
 
 <div class="wrap">
@@ -99,7 +104,7 @@
 
 	<div class="controls">
 		<div class="inner">
-			<span class="icon" on:click={play_pause}>
+			<span role="button" tabindex="0" class="icon" aria-label="play-pause-replay-button" on:click={play_pause} on:keydown={play_pause}>
 				{#if time === duration}
 					<Undo />
 				{:else if paused}
@@ -110,6 +115,8 @@
 			</span>
 
 			<span class="time">{format(time)} / {format(duration)}</span>
+
+			<!-- TODO: implement accessible video timeline for 4.0 --> 
 			<progress
 				value={time / duration || 0}
 				on:mousemove={handleMove}
@@ -117,7 +124,7 @@
 				on:click|stopPropagation|preventDefault={handle_click}
 			/>
 
-			<div class="icon" on:click={() => video.requestFullscreen()}>
+			<div role="button" tabindex="0" class="icon" aria-label="full-screen" on:click={open_full_screen} on:keypress={open_full_screen}>
 				<Maximise />
 			</div>
 		</div>
@@ -203,5 +210,7 @@
 	.wrap {
 		position: relative;
 		background-color: var(--background-fill-secondary);
+		height: var(--size-full);
+		width: var(--size-full);
 	}
 </style>
diff --git a/package.json b/package.json
index 2cd3113c5d..bbe2e73263 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
 		"ci:version": "changeset version && pnpm i --lockfile-only",
 		"storybook": "storybook dev -p 6006 --config-dir js/storybook",
 		"build-storybook": "storybook build --config-dir js/storybook",
-		"chromatic": "chromatic --exit-zero-on-changes",
+		"chromatic": "chromatic",
 		"test:ct": "playwright test -c ./.config/playwright-ct.config.ts"
 	},
 	"type": "module",