여태까지 고쳐온 오류들 : 어느 상황에서도 100%로 보이는 비디오 BG 만들기

여태까지 비디오 BG를 메인에 깐 홈페이지들을 여럿 만들면서, 다양한 이슈를 경험했다.

제일 자주 맞닥뜨리는 상황은,

사파리에서 재생되지 않는 것.

https://sunshineyellow.tistory.com/57

여태까지 고쳐온 오류들 : 사파리 영상 백그라운드가 안 뜬다/자동재생된다

https://sunshineyellow.tistory.com/67 

여태까지 고쳐온 오류들 : 사파리 video가 안보인다/재생도 안 된다

요건 여태까지 여러 방법을 시도한 결과 다양한 해결책을 업데이트하고 있다.

그러나 다른 문제가 또 있었으니.

---

고객들이 브라우저 글꼴크기를 줄인다는 것이었다.

+ 가로세로로 아무리 브라우저 비율을 바꾸어도 흰 바탕이 나오면 안 된다.

더 사용해봐야 알겠지만, 나름 괜찮은 해결방안을 찾아내 남긴다.

.main_visual {
   position: relative;
    height: 100vh;
    z-index: 0;
}

.main_visual video {
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
   -ms-transform: translateX(-50%) translateY(-50%);
   -o-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100vw;
   min-height: 100vh;
   width: auto;
   height: auto;
   z-index: -100;
}