CODEWITHSUNDEEP
reactjsvideobackgroundnext.js
Asher
Asher

Reputation: 317

Trying to render a full page video background in Next.js but getting blank page

I'm trying to have a full page video background in the homepage of my Nextjs application but am just getting blank white space where the content should be.

I'm fairly new to Nextjs and am probably making a silly mistake here, if anyone could point this out I'd really appreciate the help.

My mp4 video is stored within public/assets as so here:

enter image description here

This is my index.js file:

import Head from 'next/head';
import Image from 'next/image';
import React, { useRef, useEffect, useState } from 'react';
import ScrollAnimation from '../components/ScrollAnimation';
import Footer from '../components/Footer';
import Header from '../components/Header';

export default function Home() {

  return (
    <div>
      <Head>
        <title>Greystone</title>
        <link rel='icon' href='/favicon.ico' />
        <link
          rel='preload'
          href='/fonts/FairplayDisplay/FairplayDisplay-Bold.ttf'
          as='font'
          crossOrigin=''
        />
        <link
          rel='preload'
          href='/fonts/FairplayDisplay/FairplayDisplay-Regular.ttf'
          as='font'
          crossOrigin=''
        />
      </Head>

      <main className='overflow-y-hidden h-screen'>
        <Header />
        <div
          id='main'
          className='transition duration-1000 relative ease-in-out'
          onWheel={scrollTo}>
          {/* Page 1 */}

          <div className='h-screen w-full flex items-center'>
            <video autoplay loop muted className='w-full h-screen z-10'>
              <source
                src='../public/assets/bubble-video.mp4'
                type='video/mp4'
              />
            </video>
            <div className='flex flex-col absolute right-20'>
              <ScrollAnimation />
            </div>
            <div className='w-2/5 text-left flex flex-col text-white left-20 absolute'>
              <h2 className='text-5xl'>We’re Greystone.</h2>
              <h2 className='text-5xl'>
                We think recruitment is broken. Be part of something better.
              </h2>
              <p className='text-left mt-5 text-lg'>
                Greystone brings the top 10% of talent together in an exclusive
                club, then pairs those dream hires with the right clients. It’s
                role-finding, reimagined.
              </p>
              <div className='mt-5 border-b-2 border-white w-36'>
                <h3 className='text-left text-lg'>FIND OUT MORE</h3>
              </div>
            </div>
          </div>

        </div>
        <Footer />
      </main>
    </div>
  );
}

Many thanks in advance if anyone can help!

Upvotes: 0

Views: 5361

Answers (2)

Crafty
Crafty

Reputation: 35

adding mute attribute to the video tag solved a similar issue for me

<video
  preload="auto"
  playsInline
  autoPlay
  muted
  loop
>
  <source src="/video.mp4" type="video/mp4" />
</video>

Upvotes: 1

Asher
Asher

Reputation: 317

It seems I didn't need to have 'public' in the src url call for anyone who may experience a similar issue in future. The video tag now looks like so:

<video autoPlay loop muted className='w-full h-screen z-10'>
              <source src='/assets/bubble-video.mp4' type='video/mp4' />
            </video>

Upvotes: 3

Related Questions