[스타벅스 웹사이트] 리워즈, Youtube Iframe Api

리워즈 영역

버튼 배치 부분 확인하기

  <!-- rewards -->
  <section class="rewards">
    <div class="bg-left"></div>
    <div class="bg-right"></div>
    <div class="inner">
      <div class="btn-group">
        <div class="btn btn--reverse sign-up">회원가입</div>
        <div class="btn sign-in">로그인</div>
        <div class="btn gift">e-Gift 선물하기</div>
      </div>
    </div>
  </section>
  
  .rewards .inner {
  background-image: url("../images/rewards.jpg");
  height: 241px;
}

.rewards .btn-group {
  position: absolute;
  bottom: 24px;
  right: 0;
  width: 250px;
  display: flex;
  flex-wrap: wrap;
}

.rewards .btn-group .btn.sign-up {
  margin-right: 10px;
}

.rewards .btn-group .btn.sign-in {
  width: 110px;
}

.rewards .btn-group .btn.gift {
  margin-top: 10px;
  flex-grow: 1;
}

---

Youtube Iframe Api

  <!-- youtube video -->
  <section class="youtube">
    <div class="youtube__area">
      <div id="player"></div>
    </div>
    <div class="youtube__cover"></div>
  </section>
 -----------------------------------------------------
  // 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);

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

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

.youtube .youtube__area {
  /* FHD - 1920 x 1080 */
  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%;
  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;
}

유튜브 16:9 비율 맞추기

width: 100%, height: 0 인 상태에서 padding-top: 56.25% 적용하면 (.youtube__area::before)

부모요소(.youtube__area)의 width의 56.25%만큼 height 생성

---

애니메이션

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

function floatingObject(selector, delay, size){
  // gsap.to(요소, 지속시간, 옵션);
  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);