☕️ JS 스타벅스 페이지 클론 코딩 #Youtube IFrame API

유튜브 영상을 넣어주기 위하여 가로와 세로의 비율을 16:9로 설정해 주어야 합니다.
이때 요소의 크기를 16:9로 맞춰주기 위해서 html, css 코드를 다음과 같이 작성해 줄 수 있습니다.

<div class="container">
  <div class="item">
    <div id="player"></div> 📌 필수
  </div>
</div>

.container {
	width: 200px;
    background-color: royalblue;
}

.container .item {
	width: 100%;
    height: 0;
    padding-top: 56.25%; /* 📌 100% : 56.25% = 16 : 9 */
}

다음으로는 youtube iframe api 를 검색해서 해당 사이트에 나와있는 시작하기 부분대로 코드를 작성해 주면 됩니다.

// Youtube IFrame API를 비동기로 로드
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// 함수 이름은 변경 불가
function onYouTubeIframeAPIReady() {  
  new YT.Player("player", { // player id 값을 가진 요소를 찾음
    videoId: "An6LvWQuj_8", // 영상 url 맨 뒤의 값이 곧 id 값
    playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: "An6LvWQuj_8", // 반복 재생할 유튜브 영상 id
    },
    events: {
      onReady: function (event) { // 영상이 준비되었을 때
        event.target.mute(); // 음소거
      },
    },
  });
}

참고 사이트 - https://developers.google.com/youtube/iframe_api_reference?hl=ko
플레이어 매개변수 - https://developers.google.com/youtube/player_parameters.html?playerVersion=HTML5&hl=ko#Parameters