16-3 스타벅스 클론 코딩하기 - Part3 Youtube 영상 삽입

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

 

클론 코딩 완성형태

강의의 예제를 따라해보며 스타벅스 클론코딩을 해보았습니다. 한번에 많은 기능을 넣다보니 정리가 필요할 것 같아 파트별로 하나하나 요점들을 적어보려고 합니다.

---

순서

1. Youtube 영상

 

● Youtube 영상

동영상을 웹페이지에 넣기 전에 알아야 할 내용이 있습니다.

video size control example

부모 요소에서 너비를 지정해주고 자식요소에서 CSS의 padding-top이라는 속성을 잘 이용한다면 영상에서 많이 쓰이는 16 : 9 비율의 영상 사이즈를 조절할 수 있습니다. 위 codepen.io에 나와있는 수치인 56.25%는 16대 9비율을 퍼센트화 시킨 수치입니다. 

 

▷ Youtube 영상 삽입

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

 

YouTube Embedded Players and Player Parameters

유튜브의 영상은 IFrame Player API를 통해서 동영상을 동작시킬 수 있습니다.

 

참조 사이트의 시작하기 부분에서 일정부분을 카피하여 새로운 js 파일로 만들어 붙여넣어 주고 html파일에다 연결시켜 줍니다.

 // 2. This code loads the IFrame Player API code asynchronously.
 var tag = document.createElement('script');

 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script'[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
function onYouTubeIframeAPIReady() {
   //<div id="player"></div>를 의미
   new YT.Player('player', {
     videoId: '(유튜브 영상의 주소 Id)',   //최초 재생할 유튜브 영상 ID
     playerVars: {
      autoplay: true,          //자동재생 유무
      loop: true,              //반복 재생 유무
      playlist: '(유튜브 영상의 주소 Id)'  //반복 재생할 경우 필요한 유튜브 영상 ID 목록
     },
     events: {
       onReady: function(event) {  // 동영상이 준비가 되면 함수 실행
        event.target.mute()  //음소거
       }
     }
   });
}