CODEWITHSUNDEEP
reactjsvideonext.js
Heju
Heju

Reputation: 123

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

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?

Upvotes: 4

Views: 20024

Answers (1)

nicolas.grd
nicolas.grd

Reputation: 348

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

Upvotes: 9

Related Questions