Video와 audio

먼저, 비디오 파일을 넣고 싶으면

<video>
  <source src="비디오파일경로">
</video>

로 사용할 수 있다. video태그에는 여러가지 속성을 넣을 수 있는데,

<video autoplay muted loop poster="썸네일경로" preload="metadata">
  <source src="비디오파일경로">
</video>
/*
muted는 음소거상태
autoplay는 자동재생 (muted와 함께 넣어야 동작함) (소리때문에 자동 재생시 음소거해야함)
poster는 썸네일이미지
preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)
*/

이런식으로 할 수 있다.

비디오를 배경으로 사용할 수도 있는데, 

<div class="video-box">
  <video class="video-container" autoplay muted loop>
    <source src="img/bridge.mp4" type="video/mp4">
  </video>
  <h3 class="video-title">Buy Our Shoes!</h3>
</div>

이런식으로 video-box 상자를 만들면 된다. 

source 에는 여러가지 확장자의 파일을 넣으면 최적화된 비디오 파일을 알아서 넣는다고 하니 여러개 넣어도 좋은 선택이라고 한다. 

 

그러고 나서

video에 position: absolute 속성을 줘서 공중에 띄워 z-index로 뒤로 보내면 동영상 위에 텍스트도 잘 보이게 된다.

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; 
    z-index: -5;
}