[javascript] youtube embed 소스 자동재생 모바일에서 안된다면 (autoplay 이슈해결) | mobile 자동재생 안됨

유튜브 소스 자동재생 구현하려면 

 iframe을 사용해 autoplay를 설정해주는것이라고 알고 있을것이다. 사실 몰랐는데 최근 유튜브 영상 소스가 페이지 로드시 자동재생하는 기능을 구현하면서 현재(2022)는 autoplay가 web에서 지원되지 않는다는것을 알게되었다. 그것도 모르고 과거 블로그글들을 찾아보면서 계속 다른 부분에서 오점을 찾고 있었다. (이래서 공식 문서와 업데이트 사항을 명확하게 파악하는것이 중요하다)

 결국 어느 블로그에서 autoplay 기능이 web에서만 제공되고 mobile 환경에서는 제공되지 않는다는 이야기를 듣고 여기저기 소스를 탐색해 본 끝에 youtube에서 지원해주는 iframe_api 소스를 활용해 모바일 환경에서도 자동재생 구현이 가능한 소스를 찾았다.

 

👉 html

<div id="video" style="width: 100%; height: 360px"></div>

 

👉 script 

가상돔 환경에서는 파일 로드시 script를 읽혀주는것이 좋다 public 페이지에서는 사용하지 말자

<script src="http://www.youtube.com/iframe_api"></script>

 

👉 load 시 실행 

let youtubeUrl = "";


if (document.readyState !== "loading") {
  loadVideo();
} else {
  document.addEventListener("DOMContentLoaded", function () {
    loadVideo();
  });
}


function loadVideo() {
  (function loadYoutubeIFrameApiScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";

    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    tag.onload = setupPlayer;
  })();

  let player = null;

  function setupPlayer() {
    window.YT.ready(function () {
      player = new window.YT.Player("video", {
        height: "360",
        width: "640",
        videoId: youtubeUrl,
        events: {
          onReady: onPlayerReady,
          onStateChange: onPlayerStateChange,
        },
      });
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {
    var videoStatuses = Object.entries(window.YT.PlayerState);
  }
}

 

 

👉 video embed id 구현 로직

//youtubeUrl 소스 의 id값을 구해주는 로직
youtubeUrl = this.extractVideoID(this.boxItem.url);
 
function extractVideoID(url) {
    var regExp =
      /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
      
    var match = url.match(regExp);
    
   if (match && match[7].length == 11) {
      return match[7];
   } else {
      alert("Could not extract video ID.");
   }
},