Video Render in NEXTJS

Question

I'm using NextJS and I was trying to put a video as a background. In the FIRST render everything works fine, but when I reload the screen, the video doesn't run in the autoplay mode.

Code:

import React from 'react'
import MainHeader from '../components/MainHeader'
import { Container } from '../styles/pages/Home'

const Home: React.FC = () => {
  return (
    <Container>
      <MainHeader />
      <video autoPlay style={{ width: '500px', height: '500px' }}>
        <source src="/blue.mp4" />
      </video>
    </Container>
  )
}

export default Home

How can I fix that?

Answer 1

I have added the loop to your code. I hope it solves your problem

import React from 'react'
import MainHeader from '../components/MainHeader'
import { Container } from '../styles/pages/Home'

const Home: React.FC = () => {
  return (
    <Container>
    <MainHeader />
      <video autoPlay loop style={{ width: '500px', height: '500px' }}>
        <source src="/blue.mp4" />
      </video>
    </Container>
   )
 }

export default Home