html css video (풀페이지 비디오 삽입)

확장자 포멧	mp4 포멧 사용 (모든브라우저 대응)
태그	html source :  mp4가 모든브라우저 지원하므로 불필요 - 여러 포맷 연결할경우 <source src="video/파일명.webm">
	속성명 <video src="video/main01.mp4" autoplay="autoplay" muted="muted"></video> - autoplay="autoplay" 이나 속성과 값이 같을경우 속성명만 사용가능 <video src="video/main01.mp4" autoplay muted></video> (생략가능)
	자동재생 : muted(음소거) 필수 자동루프 (무한재생) : loop
용량	20M 이하 권장 - 용량 클경우 트래픽 문제 발생할수있음
지원	- 아이폰 저전력모드일경우 자동재생불가 - 구글,ios video 정책문서 참고 - ie9이상 가능 - ios playsinline속성사용해야 자동재생됨
문구사용	Your browser does not support the video tag 삽입 -익스에선 동영상 지원이 안되므로 위 문구가 보일 수 있게         <video src="video/main01.mp4" playinline autoplay muted loop>           Your browser does not support the video tag</video>

 

문구 사용 위 링크 참고 : https://www.w3schools.com/tags/tag_video.asp

 

full 레이아웃비디오 : 창을 줄여도 플레이아웃처럼 화면에 '꽉' 차게

- video를 감싼 부모의 높이를   100vh(꽉차게)로 창크기로 만들고,  overflow:hidden; (넘치는건 지워라) - 안쪽창이 줄어들면 기준밖으로 나가게함

.main_visual video {     position: absolute;     left: 50%;     top: 50%;     min-width: 100%;     min-height: 100%;     transform: translate(-50%,-50%); }

최소 크기를 창에 가득 채워라 (최초 해상도만큼의 크기를 가지게하며 줄어들지않음) min-width:100%;  /  min-height:100%; 가변크기인 요소를 가운데 정렬시 사용 translate의 %는 자신의 크기가 기준임 비디오의 크기가 다다르기 때문에 자동정렬공식 사용 transform:translate(-50%, -50%);