Next.js Discord

Discord Forum

[SOLVED] Video Background issues

Answered
Project Void posted this in #help-forum
Open in Discord
Project VoidOP
I am useing tailwindcss and I had a video background for maybe 5 minutes, it would stay frozen but I got that to work. I refreshed the page and now all I see is a black screen with my text. Any help?
Answered by not-milo.tsx
Then autoPlay, loop, and muted are all boolean attributes so you either set them to true by just declaring the attribute name on the video element or you explicitly set their value like this:
autoPlay={false}
View full answer

6 Replies

Project VoidOP
If it won't show why make a post 🤦
not-milo.tsx
Can you show me some of the code you have right now?
@not-milo.tsx Can you show me some of the code you have right now?
Project VoidOP
import Head from "next/head";

const Home = () => {
  return (
    <div>
    <header
  class="relative flex items-center justify-center h-screen mb-12 overflow-hidden"
>
  <div
    class="relative z-30 p-5 text-2xl text-white bg-purple-300 bg-opacity-50 rounded-xl"
  >
    Website coming soon!
  </div>
  <video autoplay="" id="background-video" loop="" muted="" poster="loader.png" class="absolute z-10 w-auto min-w-full min-h-full max-w-none">
    <source src="background-website.mp4" type="video/mp4" />

    </video>
</header>
    </div>
  );
}

export default Home
sorry for the late response
not-milo.tsx
Well, there are a few errors here. First of all you're writing jsx code, so class is not a valid attribute. You need to replace it with className. The same goes for autoplay, you should change it to autoPlay.
not-milo.tsx
Then autoPlay, loop, and muted are all boolean attributes so you either set them to true by just declaring the attribute name on the video element or you explicitly set their value like this:
autoPlay={false}
Answer