Js React 비디오 태그를 그림처럼 넣기

비디오태그를 넣고 싶으면,

<video> </video> 태그를 사용한다

video를 div로 이해하면 이해하기 쉽다

 <video className="dashBoardVideo"
            
        style={{
            maxWidth: '999.25px',
            maxHeight: '592.08px',
            display: 'block',
            }}
            
         muted
         autoPlay
         loop
          >
        <source src="/images/abc.mp4" type="video/mp4" />
        <strong>Your browser does not support the video tag.</strong>
          </video>

태그를 위에서부터 뜯어보면,

1. 비디오 태그에 css속성주기

위의 코드처럼 style태그를 안에 넣어줘도 되지만 클래스네임을 부여해서 scss에 따로 코드를 떼어주는 것이 좋다

• 클래스네임을 줘서 scss속성을 줬을때

.dashBoardVideo {
        max-width: 999.25px;
        max-height: 592.08px;
        display: block;
      }

scss속성으로 넣어줄때는 sytle과는 다르게 -(하이픈)을 넣어주어야 한다!!

maxwidth -> max-width로

2. source src, type넣기

<source src="" type="video.mp4">

3. 비디오태그가 지원되지 않을때 띄울 문구를 적어준다 (필수는 아닌듯)

 <strong>Your browser does not support the video tag.</strong>