[React] 홈페이지 메인화면에 배경 영상 추가하기

 

안녕하세요 오늘은 웹 페이지에 동영상을 추가해보도록 하겠습니다. 

무료 동영상 다운로드는 아래 홈페이지에서 가능합니다 ( 고해상도 자연, 도시, 인트로 영상 다수 보유) 

Pexels - https://www.pexels.com

 

 

 

1. public 폴더 안에 videos 폴더를 만들어줍니다. 

public 폴더 

- 정적 파일(이미지, 영상, 글꼴 등)을 넣는 곳

- 접근방식: public/ 안에 넣은 파일은 컴파일 없이 그대로 URL로 접근됨 ex) (/videos/intro.mp4)

- 사용 목적: 번들러(Webpack, Vite 등)가 가공하면 경로 꼬이거나 크기 최적화될 수 있으니까, 가공하지 않고 "그대로 쓰는 리소스"는 여기에 넣는 것

my-vite-app: 프로젝트 루트경로

Pexels 에서 다운 받은 영상을 videos 폴더에 넣어줍니다

 

 

2. src/components/VideoBackground.jsx 파일 생성 

import React from 'react';

const VideoBackground = () => {
  return (
    <div className="relative w-full h-screen overflow-hidden">
      <video
        autoPlay
        loop
        muted
         className="absolute top-0 left-0 w-full h-full object-cover z-0"
      >
        <source src="/videos/intro.mp4" type="video/mp4" />
      </video>


        <div className="absolute top-0 left-0 w-full h-full z-10 flex items-center justify-center bg-black/50 text-white">
        <h1 className="text-4xl font-bold">안녕하세요 반갑습니당!</h1>
      </div>
    </div>
  );
};

export default VideoBackground;

 

 

3. src/App.jsx 메인에 추가하기 (import, return)

- 새로 만든 VideoBackground 컴포넌트를 메인 스크립트인 App.jsx 리턴 값에 추가해줍니다. 

 import VideoBackground from "./components/VideoBackground"; --> import 필수 ! 
 .
 .
 .
 .
 중략 
 .
 .
 
 
 return (
    <>
      <motion.div
        id="scroll-indicator"
        style={{
          scaleX: scrollYProgress,
          position: "fixed",
          top: 0,
          left: 0,
          right: 0,
          height: "10px",
          originX: 0,
          backgroundColor: "#ff0088",
          zIndex: 9999,
          transformOrigin: "0% 50%",
        }}
      />
      <div style={{ minHeight: "200vh" }}>
        {" "}
        {/* 충분한 스크롤을 위한 임시 높이 */}
        <VideoBackground /> --> 새로 추가!!! 
        <Header />
        <Hero />
        <About />
        <ServicesSection />
        <StatsSection />
        <ProjectGallery />
        <BlogSlider />
        <SimpleCounter />
        <SimpleTodo />
        <SimpleCalculator />
        <ThreeDPortfolio />
        <AvatarPortfolio />
        <ParticlePortfolio />
        <Contact />
      </div>
    </>
  );
}

 

 

 

시연 영상입니다 

 

 

 

 

감사합니다.