Fix video full height

public/videos/to-compress/video-compress.sh

@@ -27,12 +27,12 @@ process_videos() {
     # Run the ffmpeg command
     ffmpeg -i "$input_file" \
       -filter_complex "[0:v]split=3[vid0][vid1][vid2]; \
-                       [vid0]scale=360x180[b0]; \
-                       [vid1]scale=360x180[b1]; \
-                       [vid2]scale=360x180[b2]" \
-      -map "[b0]"  -profile:v:0 baseline -level:v:0 3.0 -g 48 -keyint_min 48 \
-      -map "[b1]"  -profile:v:1 main -level:v:1 3.1 -g 48 -keyint_min 48 \
-      -map "[b2]"  -profile:v:2 high -level:v:2 4.0 -g 48 -keyint_min 48 \
+                       [vid0]scale=640x360[b0]; \
+                       [vid1]scale=842x480[b1]; \
+                       [vid2]scale=1280x720[b2]" \
+      -map "[b0]" -b:v:0 800k -c:v:0 libx264 -profile:v:0 baseline -level:v:0 3.0 -g 48 -keyint_min 48 \
+      -map "[b1]" -b:v:1 1400k -c:v:1 libx264 -profile:v:1 main -level:v:1 3.1 -g 48 -keyint_min 48 \
+      -map "[b2]" -b:v:2 3000k -c:v:2 libx264 -profile:v:2 high -level:v:2 4.0 -g 48 -keyint_min 48 \
       -an \
       -f hls -hls_time 4 -hls_flags split_by_time \
       -master_pl_name "$master_playlist_name" \

src/components/energy/section-4/index.tsx

@@ -77,7 +77,12 @@ export default function Section4() {
       <div className="relative h-[400vh]" ref={scrollSectionRef} id="section-2-scroll-parent">
         <ScrollStep id="step-1" className='relative h-[50vh]' offset={0.5} onEnter={setStep} />
         <div className='sticky h-[100vh] w-full flex justify-center inset-0' id="section-4-1">
-          <VideoPlayer src="/videos/stream-videos/observations/index.m3u8" className="'h-[100vh] w-full object-fill" />
+          <VideoPlayer
+            src="/videos/stream-videos/observations/index.m3u8"
+            className="h-screen w-full"
+            fluid
+            videoClassName="object-fill !h-screen"
+          />
           <motion.div
             className='absolute left-0 top-[calc(50%_-_100px)] w-full h-full text-green-950 flex flex-col gap-4'
             initial="initial"

src/components/video-player/index.tsx

@@ -2,25 +2,25 @@ import { useEffect, useRef, SyntheticEvent } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 
-export const VideoPlayer = ({ src, className, onTimeUpdate }: {
+export const VideoPlayer = ({ src, className, videoClassName, onTimeUpdate, fluid = true }: {
   src: string;
   className?: string;
-  onTimeUpdate?: (e: SyntheticEvent<HTMLVideoElement>) => void
+  onTimeUpdate?: (e: SyntheticEvent<HTMLVideoElement>) => void,
+  videoClassName?: string;
+  fluid?: boolean;
 }) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<typeof videojs.players | null>(null);
-
   useEffect(() => {
     if (videoRef.current && !playerRef.current) {
       const videoElement = document.createElement("video-js");
 
-      videoElement.classList.add('vjs-big-play-centered');
       videoRef.current.appendChild(videoElement);
 
       const player = playerRef.current = videojs(videoElement, {
         autoplay: true,
         responsive: true,
-        fluid: true,
+        fluid,
         muted: true,
         loop: true,
         html5: {
@@ -42,9 +42,18 @@ export const VideoPlayer = ({ src, className, onTimeUpdate }: {
         sources: [{
           src: src,
           type: 'application/x-mpegURL'
-        }]
+        }],
       });
 
+      // Add classes to video tag element
+      // https://github.com/videojs/video.js/issues/2806#issuecomment-156575414
+      const videoTagElement = videoElement.getElementsByTagName('video');
+      if (videoClassName && videoTagElement) {
+        const videoClassNames = videoClassName.split(' ');
+        videoTagElement[0].classList.add(...videoClassNames);
+
+      }
+
       player.on('timeupdate', (e: SyntheticEvent<HTMLVideoElement>) => {
         onTimeUpdate && onTimeUpdate(e);
       });
@@ -59,9 +68,7 @@ export const VideoPlayer = ({ src, className, onTimeUpdate }: {
   }, [src]);
 
   return (
-    <div data-vjs-player className={className}>
-      <div ref={videoRef} />
-    </div>
+    <div data-vjs-player ref={videoRef} className={className} />
   );
 }