'Can't center image and fill screen with video on NextJS app

I am trying to:

  1. center the image above the waitlist sign up
  2. have the background video scale in some relative way so that it doesn't have to load in a perfectly proportioned browser to fill the screen

Here is the index.js:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { useState, useRef } from "react";
import dynamic from "next/dynamic";

// https://docs.referlist.co/#/?id=install-in-react-or-nextjs-via-npm

export default function Home() {
  const Referlist = dynamic(
    () =>
      import("referlist").then((referlist) =>
        referlist.initialize({ domain: "tokenchamplaunch" })
      ),
    { ssr: false }
  );
  return (
    <div className={styles.container}>
      <Head>
        <title>TokenChamp</title>
        <meta name="description" content="Casual web3 games" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

    <div className="bg-video-wrap">
    <video autoPlay muted loop className={styles.video}>         
      <source src={`/CABINETS_BG.mp4`} type="video/mp4"/>       
    </video>
    <div className="overlay">
    
    <div>
    <Image src={`/logo-small.png`} alt="Logo" width={400} height={204} />
    
    <h1>Join the waitlist
    </h1>
          <Referlist />
          <div className="emailcontain">
            <input type="text" id="referlistemail" />
            <input className="waitlistbutton" type="button" id="referlistbutton" value="LFG" />
          </div>
        </div>
    </div>


      </div>
    </div>
  )
}

And here is my globals.css:

html,
body {
  background-image: url(/bg.png);
  padding: 0;
  margin: 0;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}


.bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: url(/cabinetbg.jpg) no-repeat center center/cover;
}
video {
  min-width: 100%;
  min-height: 100vh;
  z-index: 1;
}
.overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 20em;
  /* background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%); */
  background-size: 3px 3px;
  z-index: 2;
}
h1 {
  text-align: center;
  color: #fff;
  /* position: absolute; */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3;
  max-width: 400px;
  width: 100%;
  height: 50px;
}




.waitlistbutton {
  background-color: gold;
  padding: 1.5em;
  border-radius: 5px;
  margin-left: 1em;
  width: 8em;
  text-align: center;
}




.emailcontain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


input[type=text] {
  border: 2px solid white;
  border-radius: 4px;
  background-color: black;
  color: green;
  font-family: 'Courier New', monospace;
  padding: 1em;
  font-size: 1em;
  width: 30em;
}

input[type=text]:focus {
  /* border: 2px solid white; */
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
  width: 100%; 
  /* remove the above to offset the animation */
}

It currently looks like this: https://tokenchamp-ten.vercel.app/

I can't figure out how to center the logo and have the video fill the screen no matter the size/proportions of the browser.

-- EDIT

I updated the code like below, per the advice below. Did not get the same result.

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import React, { useState, useRef } from "react";
import dynamic from "next/dynamic";

// https://docs.referlist.co/#/?id=install-in-react-or-nextjs-via-npm

export default function Home() {
  const Referlist = dynamic(
    () =>
      import("referlist").then((referlist) =>
        referlist.initialize({ domain: "tokenchamplaunch" })
      ),
    { ssr: false }
  );
  return (
    <div className={styles.container}>
      <Head>
        <title>TokenChamp</title>
        <meta name="description" content="Casual web3 games" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

    <div className="bg-video-wrap">
    <video autoPlay muted loop className={styles.video}>         
      <source src={`/CABINETS_BG.mp4`} type="video/mp4"/>       
    </video>
    <div className="overlay">
    
    <div className="overlaychild">
    <Image src={`/logo-small.png`} alt="Logo" width={400} height={204} />
    
    <h1>Join the waitlist
    </h1>
          <Referlist />
          <div className="emailcontain">
            <input type="text" id="referlistemail" />
            <input className="waitlistbutton" type="button" id="referlistbutton" value="LFG" />
          </div>
        </div>
    </div>


      </div>
    </div>
  )
}

.overlaychild {
  display: flex;
  flex-direction: column;
  align-items: center;
}

This is what I got: enter image description here

cssreactjsnext.js


Solution 1:[1]

You mean like this ?

enter image description here

Just add this css to the child div of the overlay div (which has no actually no class)

display: flex;
flex-direction: column;
align-items: center;

I let you handle the spacing :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sebastien Servouze

Related Questions