[react] React-Player를 활용하여 YouTube 영상을 페이지 배경으로 설정하기

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

React 애플리케이션에서 동영상 및 오디오를 플레이하려면 React Player 라이브러리를 활용하면 간단하게 구현할 수 있습니다. 이 블로그 글에서는 React Player를 활용하여 동영상을 페이지에 쉽게 통합하고 제어하는 방법을 자세히 살펴보겠습니다.

 

 

 

 

react 구현 화면

 

 

 

1. react-player 설치

 

먼저, react-player를 설치해야 합니다. 터미널(Ctrl + J)에 다음과 같은 명령어를 입력하여 설치할 수 있습니다.

 

npm install react-player

 

 

2.  import

 

react-player를 설치한 후에는, 원하는 컴포넌트에 import 해줍니다.

 

import ReactPlayer from 'react-player/youtube'

 

 

3. 코드 작성

 

원하는 컴포넌트에 코드를 작성합니다.

제가 작성한 코드는 아래와 같습니다.

 

 return (
        <div className={style['react']}>
            
            <div className={style['container']}>
                    <ReactPlayer
                        url="https://www.youtube.com/watch?v=유튜브 영상 주소"
                        playing={true}
                        loop={true}
                        muted={true}
                        width="100%"
                        height="100%"
                        style={{ position: 'absolute', top: 0, left: 0, zIndex: -1 }}
                    />
                    
                    </div>
                </div>

    );

 

위의 코드에서, ReactPlayer에 전달된 props들은 다음과 같은 역할을 합니다.

 

url: 재생할 영상의 URL을 지정합니다.

playing: 영상이 자동으로 재생되도록 합니다.

loop: 영상이 끝나면 다시 처음부터 재생되도록 합니다.

muted: 영상이 음소거 상태로 재생되도록 합니다.

width, height: 영상의 너비와 높이를 설정합니다. 여기서는 화면 전체를 차지하도록 '100%'로 설정했습니다.

style: 영상을 화면 가장 위에 위치시키고, 왼쪽으로 정렬합니다.

 

 

위 과정을 통해 youtube 영상을 React 내에서 사용할 수 있습니다.