Trouble with embedding video in the background using Next.js and Tailwind CSS

This is the code snippet for app/page.tsx:

export default function Home() {
  return (
    <>
      <main className='min-h-screen'>
        <video
          muted
          loop
          autoPlay
          className="fixed -top-2 left-0 min-w-full min-h-full -z-50 object-cover"
        >
          <source src= '@/assets/video/videoBg.mp4'type="video/mp4" />
          <source src='@/assets/video/videoBg.mp4' type="video/ogg" />
          Your browser does not support the video tag.
        </video>

        <div className=" bg-black opacity-80 w-full min-h-[140vh] absolute top-0 left-0 -z-40"></div>
        <div className=" w-full py-10 px-0 flex flex-col justify-end">
          <div className="w-[90%] m-auto flex flex-col items-center gap-10">
            <h1 className="font-medium text-center sm:text-start text-2xl md:text-3xl lg:text-4xl xl:text-5xl leading-loose text-white">
            Empower Your Wellness Journey with Health Optima
            </h1>
            <h3 className="text-white text-3xl font-light">Your Ultimate Health and Wellness Companion</h3>
          </div>
        </div>
      </main>
    </>
  )
}

The video may not be rendering correctly within the structure.

View folder structure here

There could be an issue with the Tailwind CSS implementation.

Check out the browser preview

Answer №1

Ensure your videos are stored within the designated public folder.

public/videos/videoBg.mp4 Then access them by linking to /videos/videoBg.mp4

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ng-click is not triggering my function

I'm really struggling to understand how AngularJS and Typescript can work together efficiently. My main goal is to make a simple method call, but I seem to be stuck due to some constraints in the architecture I have chosen. I must have made a mistake ...

Using Next.js to Implement Firebase Push Notifications

Recently, I embarked on a project using Next.js and wanted to integrate Firebase's notification service. Despite following this helpful article, I encountered an issue with the getMessaging() method. The contents of my package.json file: { "na ...

Designing a web application with Angular2

As a newcomer to Angular2, I have recently started working on creating a simple hello world application. I have come across the concept of Modules and Components in Angular2. My main source of confusion lies in how to properly design an Angular2 applicat ...

``So, you're looking to retrieve a collection of objects that have a OneToMany

Is there a way to retrieve a list of objects with a OneToMany relation using TypeORM's queryBuilder? This is the desired output: { "id": 1, "firstName": "Bob", "lastName": "Sparrow", "orders": [ { "id": 1, "name": "Very Big Or ...

Is there a way to determine if there is history in Location.back in Angular 2 in order

I have a button that triggers Location.back(). I only want to show this button when there is history available. Is there a way to check if the location has any history, or if it can go back? Alternatively, is there a method for me to access the history my ...

Styling text with bold formatting can be done conditionally within JSX

Currently, I am developing a Next.JS Google Clone and facing an issue in styling the search input within the search results objects retrieved using the Google API. I want to find a way to dynamically bold the {router.query.term} within my {result.snippet} ...

Is it possible to verify type property names using a union type?

Given type UnionType = 'prop1' | 'prop2' | 'prop3'; type DerivedType = { prop1: string; prop2: number; prop3: boolean; }; Is there a method to define DerivedType in such a way that if I introduce a new member to UnionT ...

ESLint is notifying that the prop validation for ".map" is missing, with the error message "eslint react/prop-types" occurring in a Typescript React environment

Hey everyone, excited to be posting for the first time! Currently, I'm working on a small project using Typescript and React. I've run into an issue with ESLint where it doesn't recognize that a prop variable of type string[] should have a ...

Find the identifier that does not currently exist in the collection of objects

There is a situation where I have an array and an object that consists of arrays of ids, which are essentially permission objects. My goal now is to extract the ids that do not exist in the given object. Can someone assist me with devising the necessary l ...

Encountering issues with Dynamic Routing in Next.js as we attempt to retrieve and showcase specific details using slugs

Seeking assistance with retrieving the unique slug for each job that has been posted. Utilizing the app router, I have configured the following page: src/app/Job/[slug]/page.js See the code snippet below: async function getJobById(slug) { const response ...

Having Issues with CDK Virtual Scrolling in Angular Material Table

Dealing with an angular material table that contains millions of records can be quite challenging. I have implemented pagination with various options such as 10, 25, 50, 100, 500, and 1000 items per page. However, when selecting the option for 1000 or all ...

Retrieve an array of 16 elements using React in a TypeScript environment

Exploring the new React 16 feature to return array elements within the render method is throwing a TypeScript error stating "Property 'type' is missing in type 'Element[]'" const Elements: StatelessComponent<{}> = () => ([ & ...

Is there a way to view Deno's transpiled JavaScript code while coding in TypeScript?

As I dive into Typescript with Deno, I am curious about how to view the JavaScript result. Are there any command line options that I may have overlooked in the documentation? P.S. I understand that Deno does not require a compilation step, but ultimately ...

Interface of TypeScript Undetermined

Currently, I am developing a Demo API Wrapper specifically for Roblox. During the development process, I have come across a certain issue that I would like to address. My aim is to send a request and then return all the data in the manner of an API wrapper ...

Alert: VirtualizedList warns of slow updates for a large list despite optimized components

Struggling with avoiding the warning message "VirtualizedList: You have a large list that is slow to update" while utilizing the <FlatList> component in React-Native. Despite thorough research and attempts at finding a solution, including referencin ...

Unable to smoothly expand Div in React using Tailwind

I'm facing a challenge in animating a div that contains input elements. I want it to expand smoothly - initially, the text area is small and the other two inputs and buttons are hidden. When clicking on the text area, the input and button should be re ...

Scroll automatically to the last div whenever a button is clicked using React and Typescript

I'm currently working on an application being developed in React + Typescript. I am trying to implement auto-scroll functionality to the last div within a parent div where child divs are dynamically added based on data from an array of objects. The da ...

Having trouble resolving '@auth0/nextjs-auth0' during deployment on Vercel? Check out this error message: "Can't resolve '@auth0/nextjs-auth0' in '/vercel/path0/pages'"

I recently deployed a project on Vercel and have been working on enhancing the layout to achieve a minimum viable product (MVP). As part of this process, I decided to switch my authentication method to @auth0/nextjs-auth0 package for Next.js. After running ...

Exploring the difference between using import global and getStaticProps in a Next.js/React

As a newcomer to Next.js, I have a question regarding importing JSON files in my index.js file located in the pages directory. I have a component that will display a list from a JSON object, and I'm curious about the difference between importing this ...

Increase the ngClass attribute's value

Is there a way to automatically increment a numeric value in a class using the ngClass directive? For example, can we achieve something like this: <some-element [ngClass]="'class-*'">...</some-element>, where the asterisk (*) will in ...