Is it posible to add video in background with Next.js?

Question

In React I would do something like that:

type Props = {
 url: string;
}
export const Video: React.FC<Props> = ({url}) => {

  return (
    <video
      id="background-video"
      loop
      autoPlay
      muted
      style={{
        position: "relative",
        width: "100%",
        height: "15rem",
        left: 0,
        top: 0,
      }}
    >
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  );
};

But how should I do it in Next.js like forcing it to wait and get video in the browser?

Answer 1

Of course you can. Your issue has nothing to do with NextJS

Autoplay will run on every render of your page.

If you to want to delay your video you can achieve by adding setTmeout, useRef and useEffect

Plus, you should move your style to video tag

Check out this :

import React, { useEffect, useRef } from 'react';

export default () => {
    const videoRef = useRef();

    useEffect(() => {
        setTimeout(()=>{
            videoRef.current.play()
        },5000)
    }, []);

    return (
        <video
            ref={videoRef}
            controls
            width="250"
            loop
            muted
            style={{...}}>
               <source {...{sourceProps}}>
       </video>
      )
}