스타벅스 만들기5 - 이미지, Youtube

리워드

  <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">스타벅스 모바일 카드 선물하기</div>
      </div>
    </div>
  </section>

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

flex-wrap: wrap;을 이용하여 만약 버튼이 부모 요소의 크기에 넘친다면 다음줄로 줄바꿈을 해준다.

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

flex-grow: 1 속성을 사용하여 너비를 전체 너비로 지정해줄 수 있다.

유튜브 영상 첨부하기

비율 조정

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

.youtube .youtube__area {
  width: 1920px;
  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%;
}

일반적으로 유튜브와 같은 영상들은 16:9 비율을 통해 사용한다.
padding-top: 56.25%;를 이용하여 16:9 비율로 동영상 영역의 크기를 지정하였다.

left: 50%;
margin-left: calc(1920px / -2);

해당 코드를 통해 동영상이 항상 중앙 배치되도록 하였다.

youtube iframe api

iframe player api를 통해서 youtube 영상을 제아할 수 있다.

 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

 function onYouTubeIframeAPIReady() {
   new YT.Player('player', {
     videoId: 'cyD74DajmH0', // 최초 재생할 유튜브 영상 ID
     playerVars: {
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: 'cyD74DajmH0' // 반복 재생할 유튜브 ID 목록
     },
     events: {
      onReady: function (event) {
        event.target.mute() // 음소거
      }
     }
   });
 }

유튜브 영상 ID란 주소창에 '='이후의 부분을 통해 알 수 있다.
(onYouTubeIframeAPIReady의 함수 이름을 변경하면 해당 함수를 사용할 수 없게된다. 이전에는 함수 이름의 경우 우리가 원하는 이름을 사용 가능하였지만 api를 사용하는 함수들의 경우 정해진 이름의 함수를 사용하는 것을 추천한다.)

고정 이미지 배경

.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

background-attachment: fixed 해당 이미지가 상하 스크롤 될때 같이 스크롤 되지 않고 뷰포트에 고정시켜 배경 이미지와 같이 고정시켜주다.
background-size: cover 배경의 이미지를 더 넓은 너비에 맞춰서 비율을 조정해준다.