video scales properly now

2 files changed, 27 insertions, 1 deletions

diff --git a/pages/editor.tsx b/pages/editor.tsx
index ee41a27..c550eac 100644
--- a/pages/editor.tsx
+++ b/pages/editor.tsx
@@ -21,7 +21,10 @@ export default function Index() {
 			</AppBar>
 			<div className='settings'></div>
 			<div className='viewer'>
-				<div className='player'></div>
+				<div className='player posrel'>
+					<div className='outer posabs abscenter'>
+					</div>
+				</div>
 				<div className='controls'>
 					<div className='posabs abscenter'>
 						<Fab size='small' children={<SkipPreviousRoundedIcon />} />
diff --git a/styles/editor.css b/styles/editor.css
index 5b9c7b6..a25108d 100644
--- a/styles/editor.css
+++ b/styles/editor.css
@@ -8,6 +8,7 @@
 	display: grid;
 	grid-template-columns: 240px 1fr;
 	grid-template-rows: auto 1fr 210px;
+	overflow: hidden;
 }
 
 .appGrid header {
@@ -44,6 +45,28 @@
 	grid-template-rows: 1fr 80px;
 }
 
+.appGrid .viewer .player {
+	margin: 16px;
+	margin-bottom: 0px;
+}
+
+.appGrid .viewer .player .outer {
+	border: 8px solid var(--piss);
+	border-radius: 8px;
+}
+
+.appGrid .viewer .player {
+	--aspect-ratio-h: 16;
+	--aspect-ratio-v: 9;
+}
+
+.appGrid .viewer .player .outer {
+	aspect-ratio: 16 / 9;
+	max-width: 100%;
+	max-height: 100%;
+	width: 100%;
+}
+
 .appGrid .viewer .controls {
 	position: relative;
 }