How to add video background with css in react?

생각한 것 과는 달리 너무 허망할 정도로 늘 하던 react 와 유사했지만, 그래도 기록을 남겨봅니다.

아마 저와 비슷한 생각을 한 분이 분명히 지금 이 글을 보고 있을테니까요.

import React from 'react'
import videoBackground from '../assets/sampleVideo.mp4'

const BackgroundPage = () => {
	return (
    	<div className='main'>
        	<video src={videoBackground} autoPlay loop muted />
            <div className='content'>
            	<h1>Welcome</h1>
                <p>To this page.</p>
            </div>
        </div>
    )
}

export default BackgroundPage

그리고 css 에서는 사이즈에 맞게 html의 video tag를 선언 후, 사이즈를 조정해서 넣으면 됩니다.

 

끝!

How to play video in react.js using html video tag?

 

후기.

그래도 용량은 줄이시는편이.

SSR 방식이 아니라면 경우에 따라서는 조금 로딩이 걸릴지도 모르겠단 생각이 들었습니다.