모바일 기기에서 iframe 없이 youtube 영상 자동재생

유튜브 정책에 의해,

자동 재생(autoplay) 은 묵음(무음, mute) 상태에서만 가능.

기본 세팅은, 썸네일을 클릭했을 때 재생되면서 음원도 들리는 방식.

 

유튜브 사이트가 아니라,

내 사이트에 유튜브 영상을 embed 하면서,

화면이 열릴 때 바로 재생(play) 가 되게 하려면..

 

<iframe src="https://www.youtube.com/embed/영상코드?autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>

 

상기와 같이 iframe 을 사용하면서 autoplay=1&mute=1 이라고 세팅하면 되는데..

PC 에서는 잘 되지만, 모바일 기기에서는 작동하지 않아요.

사실은, iOS 가 들어간 모바일 기기에선 작동하고,

Android 가 들어간 모바일 기기에선 작동하지 않는거.

 

 

자, 여기서 부터가 오늘 이야기 하려는 내용.

모바일 기기(iOS 와 Android 모두)에서도 작동하게 하려면 YouTubeIframeAPI 를 사용해야 합니다.

 

<div id="player"></div><!-- 실제로 영상이 나올 부분 -->

<!-- 아래 코드가 실행되면 player div 위에 iframe 이 덮입혀짐 -->

 

<script src="http://www.youtube.com/iframe_api"></script><!-- 아래 원문에서 복잡하게 기술되었던 부분 -->

<script>

  var player;

  function onYouTubeIframeAPIReady(){

    player = new YT.Player('player',{

      width:'100%',

      videoId:'영상코드',

      playerVars:{'autoplay':1,'playsinline':1},

      events:{ 'onReady':onPlayerReady }

    });

  }

  function onPlayerReady(e){

    e.target.mute();

    e.target.playVideo();

  }

</script>

 

원문 : developers.google.com/youtube/iframe_api_reference?hl=ko

 

 

암튼, 상기와 같이 하면 되는데.. 하나의 화면에서 여러개의 영상이 autoplay 되게 하려면..

아래와 같은 식으로 하면 됨..

 

<div id="player1"></div>

<div id="player2"></div>

<script>

  var player1, player2;

  function onYouTubeIframeAPIReady(){

    player1 = new YT.Player('player1', { ..., events:{ 'onReady':onPlayerReady } });

    player2 = new YT.Player('player2', { ..., events:{ 'onReady':onPlayerReady } });

  }

  function onPlayerReady(e){ ... }

</script>

 

그리고, player1 이나 player2 의 div 에 css 를 적용할 것이 아니라,

그 위에 있는 (YouTubeIframeAPI 가 설정해 주는) iframe 에 css 가 적용되는 식으로 해야 함.