diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss new file mode 100644 index 000000000..3762a20f6 --- /dev/null +++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss @@ -0,0 +1,16 @@ +.container { + display: grid; + width: 100%; + justify-items: center; + + .player, + .poster { + // position: static; + // height: auto !important; + width: 100%; + grid-column: 1; + grid-row: 1; + aspect-ratio: 16 / 9; + max-height: 75vh; + } +} diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx index d3e1c9b50..9d25c97ed 100644 --- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx +++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx @@ -10,6 +10,8 @@ import PlaybackMetrics from '../metrics/playback'; import createVideoSettingsMenuButton from '../settings-menu'; import LatencyCompensator from '../latencyCompensator'; +import styles from './OwncastPlayer.module.scss'; + const VIDEO_CONFIG_URL = '/api/video/variants'; const PLAYER_VOLUME = 'owncast_volume'; const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled'; @@ -297,13 +299,13 @@ export const OwncastPlayer: FC = ({ source, online }) => { ); return ( -
+
{online && ( -
+
)} -
+
{!videoPlaying && ( )} diff --git a/web/components/video/VideoJS/VideoJS.module.scss b/web/components/video/VideoJS/VideoJS.module.scss index 78932f051..eff313b0e 100644 --- a/web/components/video/VideoJS/VideoJS.module.scss +++ b/web/components/video/VideoJS/VideoJS.module.scss @@ -7,8 +7,3 @@ position: static !important; } } - -.poster { - width: 100%; - height: 100%; -}