패스트캠퍼스 온라인 강의를 통해 만든 ★다방 랜딩페이지. YOUTUBE 영상을 배경으로 넣는 방법을 배웠다

코드를 작성하면서 생긴 궁금증
HTML에서 왜 "youtube__area"와 형제 요소로 "youtube__cover"를 두는지와
Youtube IFrame API 문서의 3번을 실행할 때, 변수 선언부분 var player;는 왜 스킵하고
new YT.player을 변수에 할당하는 부분은 왜 스킵했는지...
CSS를 작성할 때, margin-top: calc(1920px * 9 / 16 / -2); 이건 무슨 원리로 이렇게 계산이 되며 어떻게 이렇게 부모요소인 youtube를 지나서 배치가 되는지....

HTML

• Youtube IFrame API(developers.google.com)에서 제공하는 형식을 따르기 위해 <div id="player"></div>를 삽입
• 영상을 삽입할 공간("youtub__cover")을 만들 때, "youtube__area"와 형제 요소로 "youtube__cover"를 만들어서 "youtube__cover"가 "youtube__area"위에 덮어 쓰는 방식을 사용
• <script defer src="./js/youtube.js"></script> > youtube.js 파일을 html파일과 연결시키기 위해 head tag에 삽입

<!-- YOUTUBE VIDEO -->

<section class="youtube">
  <div class="youtube__area">
    <div id="player"></div>
  </div>
  <div class="youtube__cover"></div>
</section>

JS_youtube.js

• Youtube IFrame API(developers.google.com)에서 제공한 명령 사용
• Youtube IFrame API : youtube 영상을 어떻게 하면 내 사이트에 삽입할 수 있는지에 대한 참조문서
  
• 해석
  1. var tag = document.createElement('script'); > tag라는 변수에 'script'태그를 생성해서 할당한다(createElement라는 메소드를 통해 요소생성)
  2. tag.src = "https://www.youtube.com/iframe_api"; > 그렇게 생성한 tag에 src라는 속성에다가 실제 youtube에 영상을 재생할 수 있는 명령의 자바스크립트 파일을 가져온다(할당)
  3. var firstScriptTag = document.getElementsByTagName('script')[0]; > script라는 tag네임을 가지고 있는 요소들 중에 0번째(첫번째) 요소를 firstScriptTag에 할당해준다
  4. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); > 그렇게 찾은 firstScriptTag 중의 parentNode(부모요소)를 찾아서 insertBefore(무엇인가의 이전 부분에 삽입해줄 것) > 삽입되는 요소는 우리가 찾은 tag라는 변수, firstScriptTag이전
• 적용 : 1~4번까지 새로 만든 youtube.js 파일에 붙여주고, Youtube IFrame API 문서의 3번에 해당하는 api들도 붙여주고 내가 제어를 원하는 대로 함수의 옵션들을 만져준다
  1. new YT.Player('player', { > html <div id="player"> id값
  2. videoId: 'An6LvWQuj_8', > 최초 재생할 유튜브 영상 ID
  3. autoplay: true, > 자동 재생 유무
  4. loop: true, > 반복 재생 유무
  5. playlist: 'An6LvWQuj_8' > 반복 재생할 유튜브 영상 ID 목록

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() {
       new YT.Player('player', {
              videoId: 'An6LvWQuj_8', 
              playerVars: {
                  autoplay: true, 
                  loop: true, 
                  playlist: 'An6LvWQuj_8' 
              },
              events: {
                  onReady: function (event) {
                      event.target.mute() // 영상이 준비가 되면 영상을 음소거 처리
                  }
              }
          });
        }

CSS

• Youtube와 Video등 영상을 삽입할 때 이용할 수 있는 원리(16:9의 원리)
  1. container width 값을 주고 height값을 주지 않고 item에 width:100% height: 0, padding-top을 50% 주면 item height은 container width의 50%가 된다
  2. youtube나 vimeo 영상들은 보통 가로 : 세로의 비율이 16:9로 제공이 된다
  3. container item의 padding-top:56.25%로 주면 item 요소의 가로:세로의 비율이 16:9가 된다
• 이 원리를 사용해서 CSS를 작성하고 youtube 영상을 삽입하였따
• 참고로 Full HD 가로 1920px, 세로 1080px
• .youtube__area 안에 요소를 만들어서 스타일을 만들고 싶은데
  HTML에서 자식요소를 만들지 않고 CSS 안에서 스타일로 해결(가상요소선택자 before를 사용함)

/* YOUTUBE VIDEO */

.youtube {
    position: relative;
    height: 700px;
    background-color: #333;
    /* youtube 영역에서 넘치는 부분 전부 잘라내기 */
    overflow: hidden;
}

.youtube .youtube__area {

    width: 1920px;
    position: absolute;
    left: 50%;
    margin-left: calc(1920px/-2);
    /* top부분에 50%부분에 위치하겠음 */
    top: 50%;
    margin-top: calc(1920px * 9 / 16 / -2);
}


.youtube .youtube__area::before {
    content: "";
    /* 가상요소선택자는 인라인요소이기 때문에  display: block; 선언  */
    display: block;
    width : 100%;
    height: 0;
    padding-top:56.25%;
}

.youtube .youtube__cover {
    background-image: url("../images/video_cover_pattern.png");
    background-color: rgba(0,0,0,.3);
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

#player {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}