18일차

리워즈
Youtube iframe API

리워즈 섹션

<!-- REWARD -->
  <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>

/* REWARD */
.rewards {
  position: relative;
}
.rewards .bg-left {
  width: 50%;
  height: 100%;
  background-color: #272727;
  position: absolute;
  top: 0;
  left: 0;
}
.rewards .bg-right {
  width: 50%;
  height: 100%;
  background-color: #d5c798;
  position: absolute;
  top: 0;
  right: 0;
}
.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;
}

• bg-left bg-right로 양옆 연장하기
  btn-reverse 회원가입 버튼 반전시켜 강조

.container {
	width: 200px;
    background-color: royalblue;
}
.container .item {
	width: 100%;
    height: 0;
    padding-top: 50%;
}

• padding-top 50% 부여할경우 가로 세로 2:1 출력
• padding-top: 56.25% 부여할경우 16:9 출력

Youtube iframe API

// 2. This code loads the IFrame Player API code asynchronously.
// 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);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.

function onYouTubeIframeAPIReady() {
  	// <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() // 음소거 
            }
        }
       
    });
}

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

IFrame Player API

Youtube동영상 재생되는 api
원하는 동영상 주소 url에서 id값 추출하기