html video 태그 모바일 전체화면 이슈(feat.아이폰)

필수요소 3가지!

html에 video코드를 넣어야 할 경우 컴퓨터에서 보면 괜찮지만

모바일에서 보면 비디오만 떡하니 전체화면으로 나와서 방해를 해 매우 짜증났다.

이걸 도대체 어떻게 해야하나..

나중에 알아봐야지 하다가

결국 오늘에서야 알게 됐다..!!!

https://okayoon.tistory.com/entry/video%ED%83%9C%EA%B7%B8-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9D%B4%EC%8A%88-%EC%A0%95%EB%A6%AC-%EC%82%AC%ED%95%AD

위 블로거님의 글을 참고하였는데, 바로 html에서 video태그를

자동재생으로 사용하고 싶을 때 필수 요소 '3가지'를 넣어야 한다는 것!

video 자동재생 필수 요소 3가지는 바로

1. autoplay
2. muted
3. playsinline

pc브라우저나 안드로이드는 1,2번인 autoplay와 muted만 넣어도

모바일에서의 video태그의 문제점은 사라지지만

나와 같은 아이폰 유저들을 위해서는

3번인 playsinline을 꼭 넣어줘야 한다.

코드 예시

<video src="images/index.mp4" muted loop autoplay playsinline></video> 

그랬더니

아이폰에서도 전체화면이 되지 않고

정상적으로 비디오 자동재생이 된다!!

하 해결돼서 너무 기분 좋다..^^

모바일용 메인을 따로 해야되나 고민이었는데ㅎㅎ