'How to defer after the fold video load after page loads in React/NextJS

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

javascript next.js

Solution 1:^[1]

The preload attribute is ignored if autoplay is present.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Diego

'How to defer after the fold video load after page loads in React/NextJS

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]