uulog

아이폰에서 유튜브 동영상 자동 전체화면 사용 안함

이 글은 유튜브 동영상 테스트와 이어진다. 아이폰은 브라우저에서 동영상을 재생하면 자동으로 전체화면으로 전환된다. 이를 해결하려면 강제적이거나 복잡한 스크립트로만 가능한 줄 알았는데, 구글링으로 금방 찾을 수 있었고 생각보다 매우 간단하게 해결할 수 있었다.

개발자 샘플

https://developers.google.com/youtube/youtube_player_demo

위 링크를 클릭하면 유튜브 플레이어 데모 페이지로 이동한다. 여기서 플레이어 매개변수 표시 버튼을 클릭하면 다양한 매개변수들을 확인할 수 있는데, 여기서 주목해야 할 매개변수는 playsinline 이다.

이 매개변수는 iOS의 HTML5 플레이어에서 동영상을 인라인으로 재생할지 전체화면으로 재생할지 여부를 제어한다. 유효한 값은 다음과 같다.

  • 0: 이 값을 지정하면 전체화면으로 재생된다. 현재 기본값이지만 기본값은 변경될 수 있다.
  • 1: 이 값을 지정하면 TRUE로 설정된 allowsInlineMediaPlayback 속성과 함께 만들어진 UIWebViews이 인라인으로 재생된다.

여기서는 매개변수를 추가하면 IFrame 코드가 어떤 식으로 바뀌는지 이해하면 되고, 더 많고 각 매개변수의 자세한 설명을 원한다면 이글 제일 하단의 참고 링크를 살펴보면 된다.

IFrame 삽입 코드

<iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen>

위 코드는 가장 기본적인 IFrame 삽입 코드다. 여기서 playsinline 를 체크하고 선택한 옵션으로 플레이어 업데이트 버튼을 클릭하면 아래와 같은 코드를 볼 수 있다.

<iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/M7lc1UVf-VE?playsinline=1" frameborder="0" allowfullscreen>

한마디로 유튜브 동영상을 퍼갈 때 playsinline 매개변수만 추가해주면 된다는 뜻이다. IFrame 코드를 삽입할 때마다 이 매개변수를 입력하면 번거로울 수 있는데, 왠지 아래 방법으로 글마다 일일이 입력하지 않아도 스크립트를 통해 자동으로 유튜브 동영상에 매개변수를 추가할 수 있을 거 같기도 하다.

https://forums.adobe.com/thread/2316337

아주 간단해 보이는 스크립트지만 지식이 부족해서 조금 더 고민해보고 해결방안을 찾아봐야겠다.

참고 링크

https://stackoverflow.com/questions/40960747/disable-auto-fullscreen-of-youtube-embeds-on-iphone https://developers.google.com/youtube/player_parameters

블로그의 정보

uulog

chaz.uu

활동하기