Fit video media within Video component (#6698)

* Add mirror-wrap styling in Player.svelte

* add changeset

* add vertical video story

* formatting

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/tall-brooms-eat.md

@@ -0,0 +1,6 @@
+---
+"@gradio/video": patch
+"gradio": patch
+---
+
+fix:Fit video media within Video component

js/video/Video.stories.svelte

@@ -4,7 +4,6 @@
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
 	import { userEvent, within } from "@storybook/testing-library";
-	import { waitFor } from "@testing-library/dom";
 </script>
 
 <Meta title="Components/Video" component={Video} />
@@ -44,6 +43,23 @@
 		width: 400
 	}}
 />
+<Story
+	name="Static video with vertical video"
+	args={{
+		value: {
+			video: {
+				path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
+				url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
+				orig_name: "world_vertical.mp4"
+			}
+		},
+		label: "world video",
+		show_label: true,
+		interactive: false,
+		height: 200,
+		width: 400
+	}}
+/>
 
 <Story
 	name="Upload video"

js/video/shared/Player.svelte

@@ -99,7 +99,7 @@
 </script>
 
 <div class="wrap">
-	<div class:mirror>
+	<div class="mirror-wrap" class:mirror>
 		<Video
 			{src}
 			preload="auto"
@@ -199,6 +199,12 @@
 		transform: scaleX(-1);
 	}
 
+	.mirror-wrap {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
 	.controls {
 		position: absolute;
 		bottom: 0;