JS API | 유튜브 영상 웹에 iframe 적용하기

요약

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

위의 코드를 활용하여 영상을 가져오면 PC에서는 자동재생이 되지만, 모바일 휴대폰에서는 자동재생이 안될 가능성이 있습니다. 이를 해결하기 위해서는 외부 자바스크립트 API 코드로 조절하는 방법이 있습니다.

사용법

<div id="player"></div>
<!-- 실제로 영상이 나올 부분 -->
<!-- 아래 코드가 실행되면 player div 위에 iframe 이 덮입혀짐 -->

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

<script>
  let 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>

<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>

참조

• iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google Developers