diff --git a/src/element/live-video-player.tsx b/src/element/live-video-player.tsx
index 834a2f6..ed867d8 100644
--- a/src/element/live-video-player.tsx
+++ b/src/element/live-video-player.tsx
@@ -59,12 +59,12 @@ export function LiveVideoPlayer(
}, [video, streamCached, props.status]);
return (
- <>
+
);
}
@@ -90,11 +90,11 @@ export function WebRTCPlayer(props: VideoPlayerProps) {
}, [video, streamCached]);
return (
- <>
+
);
}
\ No newline at end of file
diff --git a/src/pages/stream-page.css b/src/pages/stream-page.css
index 8401991..24923e8 100644
--- a/src/pages/stream-page.css
+++ b/src/pages/stream-page.css
@@ -2,7 +2,9 @@
display: grid;
grid-template-columns: auto 450px;
gap: var(--gap-m);
- height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+ height: calc(
+ 100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)
+ );
}
.stream-page .video-content {
@@ -10,26 +12,34 @@
gap: var(--gap-s);
display: flex;
flex-direction: column;
+}
+
+.stream-page .video-overlay {
position: relative;
}
.stream-page .video-content video {
width: 100%;
- max-height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+ aspect-ratio: 16/9;
}
.stream-page .live-chat {
padding: 24px 16px 8px 24px;
border: 1px solid #171717;
border-radius: 24px;
- height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s) - 24px - 8px);
+ height: calc(
+ 100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s) -
+ 24px - 8px
+ );
}
@media (max-width: 1020px) {
.stream-page {
display: flex;
flex-direction: column;
- height: calc(100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s));
+ height: calc(
+ 100vh - var(--header-page-padding) - var(--header-height) - var(--gap-s)
+ );
}
.stream-page .video-content {