[버블 bubble.io] 유튜브 모바일 영상 자동재생

오늘도 느끼고 간다.

역시 개발은 공식문서가 짱이다..

 

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

 

역시 보안계의 최강자 iOS에서는 함부로 유튜브 영상을 재생시켜 주지 않는다.

예전에는 iframe으로 속성값을 주면 가능했으나

이제는 api를 스크립트로 불러와서 사용해야 한댄다.

 

playerVars는 아래에서 추가시킬 파라미터들을 선택해서 추가하면 된다.

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

<div id="player" style="width:100%; height:100%" class="vodBox"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
  /*
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  */

  var player;
  function onYouTubeIframeAPIReady(){
    player = new YT.Player('player',{
      videoId:'byspyEyhghc',
      playerVars:{'autoplay':1,'controls':0, 'enablejsapi':1, 'fs':0, 'loop':1, 'playlist':'byspyEyhghc', 'modestbranding':1, 'playsinline':1},
      events:{ 'onReady':onPlayerReady }
    });
  }
  function onPlayerReady(e){
    e.target.mute();
    e.target.playVideo();
  }
</script>

 

+ 그런데 이런 정책들 때문인지 대부분의 랜딩페이지에서 영상 임베드는 pc에서만 쓴다.

안되면 돌아가자^^;