Youtube API (유튜브 영상 배경)

01.Youtube API

CSS

/* YOUTUBE VIDEO */
.youtube {
  position: relative;
  height: 700px;
  background-color: #333;
  overflow: hidden;
}

• .youtube 의 경우 영상이 실제로 사이트에서 보일 영역의 사이즈 height를 700px, 그리고 overflow: hidden을 통해서 영상이 넘치는 부분을 안보이게 해줍니다.

CSS

.youtube .youtube__area {
  width: 1920px;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px / -2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
}

• .youtube__area 의 경우 영상의 크기를 지정하기 위해서 width:1920px로 지정하였다.
• 그리고 해당 영상이 화면 중앙에 계속 위치하게 시키기 위해서 absolute, 50%, margin 방법을 사용하였으며 여기에서는, 상하좌우 모두 중앙에 위치시키기 위해서 top, left 둘다 썻다.

CSS

.youtube .youtube__area::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}

• 영상의 비율을 제어하려면 자식요소가 필요한데, html적으로 자식을 생성하는 것보다 css적으로 해결하는 방법을 사용하는 것이 좋다.
• 그래서 가상요소를 사용하여 내부의 가상 요소를 만들고, 가상요소의 경우 inline 이기 때문에 block요소로 지정해주고, width: 100%, height:0 처리하고 padding-top:56.25%를 통해 16:9 비율로 영상이 갖추어 지게 하였다.

CSS

.youtube .youtube__cover {
  background-image: url("../images/video_cover_pattern.png");
  background-color: rgba(0, 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;
}

• youtube__cover는 필터의 역할을 하기 때문에 rgba(0, 0, 0, 0.3)을 통해서 투명검정의 해당 이미지 패턴을 씌운다.

Youtube.js
Youtube Iframe API
Youtube Iframe API 매개변수 옵션들

// 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() {
  // 이름 변경 하면 안됨
  new YT.Player("player", {
    videoId: "An6LvWQuj_8", // 최초 재생할 유튜브 영상 ID => 
    playerVars: { // 영상을 재생하기 위한 여러가지 변수들(객체)
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: "An6LvWQuj_8", //  반복 재생 유무가 true인 경우에는 반복 재생할 유튜브 영상 ID 목록을 반드시 넣어줘야 한다.
    },
    events: {
      onReady: function (event) {
        event.target.mute(); // 음소거
      },
    },
  });
}

• videoId 속성에는 해당 Youtube 영상에서 링크의 watch?y=의 뒷부분을 복사해서 붙여주면 된다.
• script 태그의 요소를 바디에 생성해서 tag변수에 할당하고 tag에 src 속성에 youtube API를 넣어 연결합니다.
• 바디에 있는 script 태그중 첫번째 것을 가져와서 firstScriptTag에 할당합니다.
• firstScriptTag 요소의 부모 요소(parentNode)의 내부에서 tag요소를 firstScriptTag 앞에 삽입함
• 부모노드.insertBefore(삽입할 노드, 부모 내부의 기준점 노드)
• 부모노드의 내부에서 기준점 노드의 앞에 삽입할 노드를 삽입합니다.
• onYouTubeIframeAPIReady()함수의 이름은 Youtube를 제어해주는 JavaScript 라이브러인 Youtube Iframe API가 자체적으로 이함수의 이름을 찾는것이기 때문에 절대 함수의 이름을 바꾸면 안된다.
• javascript가 모두 읽히면 onYouTubeIframeAPIReady() 함수가 실행되는데
  onYouTubeIframeAPIReady 함수 YT클래스의 Player 함수를 통해서 해당 영상을 실행합니다.
• Player('player를 넣을 요소의 id', {옵션})