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

user_11169152 0
Viewed 9933

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 force it to wait and get video in browser?

next.js video
1 Answers

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 moove 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>
      )

}

user_66044240
Related