I'm trying to up my lighthouse scores by loading a video after the page has fully loaded. It's after the fold and will not be seen until scroll so I want it to load everything on the page first so it can get a quick FCP and then load the video after everything.

This doesn't seem to work in terms of upping my Lighthouse score...

export default function AboutUs() {
  const [loadVideos, setLoadVideos] = useState(false)

  useEffect(() => {
    setLoadVideos(true)
  }, [])

   .....etc etc.....

    {loadVideos && (
          <video
            autoPlay
            muted
            playsInline
            loop
            preload="none"
            poster="/images/charge_poster.jpg"
          >
            <source src="/videos/charge.mp4" type="video/mp4" />
          </video>
        )}
   ..Closing tags etc

Is there a better way? I don't want to load on scroll cause then the video will have to load when they are already there. Just load after HTML, CSS and Images preferably.

Thanks