[HTML/CSS] 화면 백그라운드에 영상 넣기 (feat. React 적용법)

최근 페이지의 Background로 영상을 집어넣어 좀 더 고급스러워 보이는 사이트들이 종종 보입니다.

 

이를 간단히 구현하는 방법을 알아보도록 하겠습니다.

 

 

 

 

1. Project Setting

npm create vite@latest react-video --template react
cd react-video
npm install
npm run dev

우선 테스트를 진행할 프로젝트를 생성하였습니다.

 

저는 Vite + React + JS로 진행하였습니다.

 

제가 설정한 방법과 동일하게 프로젝트를 생성하려면 위와 같이 진행하시면 됩니다.

 

(Vue와 같은 다른 라이브러리나, Vanilla HTML을 사용하더라도 영상 경로 등을 제외하면 기본 코드에 큰 차이는 없습니다!)

 

 

 

 

1440p video

https://pixabay.com/videos/lake-houses-lakeside-mountainside-181377/

 

1080p video

https://pixabay.com/videos/water-water-tap-drinking-water-181541/

 

동영상은 테스트를 위해서 1080p와 1440p 두 가지 사이즈로 준비하였습니다.

 

각각 video_test1.mp4와 video_test2.mp4라고 명명하였습니다.

 

파일은 이름을 수정하고 public 폴더에 넣어두었습니다.

 

 

 

 

react-video
ㄴ public
    ㄴ video_test1.mp4
    ㄴ video_test2.mp4
ㄴ src
    ㄴ App.jsx
    ㄴ main.jsx
    ㄴ index.css

전체적인 프로젝트 파일 경로는 대략적으로 위와 같습니다.

 

App.jsx와 main.jsx는 React 기본 설정을 제외한 나머지 초기 코드를 모두 제거하시면 됩니다.

 

 

 

 

 

2. Video 출력

// App.jsx
import video1 from '/video_test1.mp4'; // 1080p
import video2 from '/video_test2.mp4'; // 1440p

function App() {
    return (
        <>
            <video autoPlay loop muted>
                <source src={video1} type='video/mp4' />
            </video>
            <div className='content'>
                <h1>AngelPlayer`s Viedo Test!!!</h1>
                <button>버튼도 나온다!!</button>
            </div>
        </>
    );
}

export default App;

App.jsx에 video1를 background로 적용해보도록 하겠습니다.

 

 

 

작성을 완료하면 위와 같이 영상이 화면에 잘 출력되는 것을 확인할 수 있습니다.

 

 

다만 지금은 영상의 크기가 1080p 이고 제가 테스트 중인 모니터의 해상도가 1080p이기 때문에 크기가 맞게 보이는 것입니다.

 

만약 1440p 영상으로 테스트를 진행했더라면 가로 스크롤이 생기면서 영상이 화면에 딱맞게 출력되지는 않았을 것입니다.

 

 

추가적으로 지금은 h1 태그와 button 태그가 영상 밖에 나와있는데, 이를 영상 위로 올리고 싶습니다.

 

 

 

 

3. css 수정

/* 기본 적용된 padding, margin 제거 */
* {
    padding: 0;
    margin: 0;
}

/* 화면 크기에 맞춰서 영상크기가 100%가 되도록 적용 */
video {
    width: 100%;
}

/* 영상 가운데 들어갈 태그들 가운데 띄워지도록 적용 */
.content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

css를 통해서 영상의 최대 width를 100%로 적용하였습니다.

 

추가적으로 영상 내부에 태그 띄우기 등, 앞에서 언급했던 문제를 flex 등을 적용하여 해결하였습니다.

 

 

 

1440p 영상도 width 100%가 적용되어 꽉차게 화면에 출력되는 것을 볼 수 있습니다.

 

 

 

 

Source

https://github.com/ssh5212/react-self-test/tree/bg-video

GitHub - ssh5212/react-self-test