스타벅스 클론코딩-6 (YOUTUBE)

 

MAIN CONTENT - YOUTUBE

 

클론코딩 YOUTUBE 특징

- 자동 재생, 음소거, 무한 반복

- 외부에 있는 유튜브 영상을 가져옴

 

<!-- youtube.js 연결 -->
<script defer src="./js/youtube.js"></script>

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

 

/* YOUTUBE VIDEO CSS*/
.youtube {
  position: relative;
  height: 700px;
  background-color: #333;
  overflow: hidden;
}
.youtube .youtube__area { 
  width: 1920px;
  background-color: orange;
  position: absolute;
  left: 50%;
  margin-left: calc(1920px / -2);
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
}
.youtube .youtube__area::before {
  content: "";
  display: block;
  width: 100%;
  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;
}

 

// youtube.js
// IFrame Player API를 통해 YouTube 동영상을 제어할 수 있다
// Youtube IFrame API를 비동기로 로드합니다.
// 비동기(Asynchronous), 요청한 결과가 동시에 일어나지 않는다

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() {
  // <div id="player"></div>
  new YT.Player('player', {
    // 최초 재생할 유튜브 영상 ID
    videoId: 'An6LvWQuj_8',
    playerVars: {
      // 자동 재생 유무
      autoplay: true,
      // 반복 재생 유무
      loop: true,
      // 반복 재생할 유튜브 영상 ID 목록
      playlist: 'An6LvWQuj_8'
    },
    events: {
      // 영상이 준비되었을 때 실행
      onReady: function (event) {
        // 음소거
        event.target.mute()
      }
    }
  });
}

 

영상 위에 떠있는 이미지 삽입, 애니메이션 추가

 

특징

- 해당 이미지들이 위, 아래로 둥둥 뜨는 애니메이션 적용

 

  <!-- YOUTUBE VIDEO -->
  <section class="youtube">
    <div class="youtube__area">
      <div id="player"></div>
    </div>
    <div class="youtube__cover">
      <div class="inner">

        <img src="./images/floating1.png" alt="Icon" class="floating floating1" />
        <img src="./images/floating2.png" alt="Icon" class="floating floating2" />
        <img src="./images/floating3.png" alt="Icon" class="floating floating3" />

      </div>
    </div>
  </section>

 

.youtube .inner {
  height: 700px;
}
.youtube .floating1 {
  position: absolute;
  top: 50px;
  left: 0;
}
.youtube .floating2 {
  position: absolute;
  top: 350px;
  left: 150px;
}
.youtube .floating3 {
  position: absolute;
  bottom: 200px;
  right: 0;
}

 

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  // `.toFixed()`를 통해 반환된 문자 데이터를,
  // `parseFloat()`을 통해 소수점을 가지는 숫자 데이터로 변환
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}

function floatingObject(selector, delay, size) {
  // gsap.to(요소, 시간(s), 옵션);
  gsap.to(
    // 선택자
    selector, 
    // 애니메이션 동작 시간
    random(1.5, 2.5), 
    {
      // 옵션

      y: size,
      // 무한 반복
      repeat: -1,
      // 한번 재생된 애니메이션을 다시 뒤로 재생하는 옵션
      yoyo: true,
      // 움직임 제어
      ease: Power1.easeInout,
      // 지연 시간 추가
      delay: random(0, delay)
    }
  );
}
floatingObject('.floating1', 1, 15);
floatingObject('.floating2', .5, 15);
floatingObject('.floating3', 1.5, 20);