iphone 사파리에서 video가 전체화면으로 재생되는 이슈

진짜 저는 사파리가 싫어요...

아이폰에서만 안되는 모든 문제들이 싫어요...

그래도 일은 해야하니.. 처리를 해보았습니다...쓰읍 

기존 코드 

     <video
        autoPlay
        muted
        loop 
        className="absolute inset-0 w-full h-full object-cover z-[-1] opacity-100"
      >
        <source src="/BG.mp4" type="video/mp4" />
      </video>

이렇게 배경으로 mp4형식의 동영상을 무한재생하는 코드를 넣었는데요..

 

이것이 말입니다..

크롬도 삼성인터넷에서도 사파리웹에서도 아~무 문제가 없는데 아이폰 사파리에서만!!!!!

화면 재진입시에 동영상이 갑자기 전체화면모드로 재생되는겁니다....후.....

 

흐린눈을 하고 싶었으나 하지 못하고

video 태그에 playsinline속성을 추가해 해결했습니다..

 

수정한 코드

      <video
        autoPlay
        muted
        loop
        playsInline
        className="absolute inset-0 w-full h-full object-cover z-[-1] opacity-100"
      >
        <source src="/BG.mp4" type="video/mp4" />
      </video>

 

ios에서는 기본적으로 비디오가 자동으로 전체화면 모드로 재생되기 때문에 이런 동작을 막으려면 playsinline속성을 추가해주어야 한다고 합니다.

 

거 참 까다롭네...까다로워...