HTML에 영상 삽입하기

영상을 삽입하기 위한 태그로 iframe이나 video를 사용할 수 있다.

유튜브 링크등 URL로 영상을 띄우기 위해서는 iframe을, 로컬의 영상을 사용하기 위해서는 video를 사용할 수 있다.

video는 브라우저가 지원하는 여러 타입의 확장자를 지원하기 위해서 여러 옵션의 영상이 들어갈 수 있다.

<iframe
    width="540px"
    height="290px"
    src="영상_URL"
    allowFullScreen
/>

<video controls width="540px">
    <source src="webm_영상_파일_위치" type="video/webm">
    <source src="mp4_영상_파일_위치" type="video/mp4">
    지원되는 비디오가 없습니다.
</video>

// iframe 전체 크기로 설정
const styleObj = {
    overflow: "hidden",
    overflowX: "hidden",
    overflowY: "hidden",
    height: "100%",
    width: "100%",
    position: "absolute",
    top: "0px",
    left: "0px",
    right: "0px",
    bottom: "0px"
}

~~ 생략 ~~
            <iframe 
                width={videoWidth}
                height={videoHeight}
                src={url}
            >

참고 자료 출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video,
https://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100