[React] <video> 내부에 <div> 삽입하기

원칙적으로 <video> 요소 내부에 <div> 요소를 넣는 건 불가능하다. 따라서

<video>와 <div>를 감싸는 부모 <div>를 생성하여 감싸줌으로써 구현할 수 있다.

아래 코드는 카메라 off시 비디오 태그 영역에 이름을 표시하기 위한 코드이다.

예제 코드

• tailwindcss를 사용하여 구현하였다.
• transform을 사용한 이유는 absolute를 이용하여 top left 정렬 시 <div>의 왼쪽 위 꼭짓점이 기준점이 되기 때문이다. (참고)

<div className="relative h-80 w-full bg-[#141218] rounded-2xl">
	<video ref={videoRef} autoPlay className="h-full w-full rounded-2xl"></video>
	{!isCameraOn && <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-20 h-20 flex justify-center items-center bg-slate-400 text-white font-semibold text-4xl rounded-full">
      김              
	</div>}
</div>