[TIL #7] 클론코딩 - 유튜브 영상 배경(iframe API)

Yejin Yang·2022년 4월 15일

TIL

[TIL]

목록 보기

7/69

스타벅스 랜딩 페이지 예제

목표

Youtube iframe API 사용하여 비디오 배경 넣기

[YouTube Player API]
[YouTube 내장 플레이어 및 플레이어 매개변수]

HTML

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

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

  </div>
</section>

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%;
  height: 0;
  padding-top: 56.25%;
}
.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 .inner {
  height: 700px;
}
.youtube .floating1 {
  position: absolute;
  top: 50px;
  left: 0;
}
.youtube .floating2 {
  position: absolute;
  top: 350px;
  left: 150;
}

스타일을 위해서만 존재하는건 html 구조에서 따로 만들지 않고 css에서 만들수있게 하는 것이 좋다. 따라서, 가상클래스선택자 .youtube .youtube__area::before 로 제어한다. (before는 인라인 요소, display: block;)
margin-top: calc(1920px * 9 / 16 / -2);
가로너비를 기준으로 세로 너비가 16:9 비율로 될수있도록 9를 곱하고 16으로 나눈뒤, -2해서 이 요소의 세로너비를 절반만큼 끌어올릴 수 있다.(유투브나 비메오에 영상을 삽입할 때 유용하게 사용한다 보통 영상은 16:9비율로 제공)

내장 플레이어에는 200x200픽셀 이상의 표시 영역이 있어야 합니다. 플레이어에 컨트롤이 표시되는 경우에는 표시 영역이 최소 크기 미만으로 축소되지 않고 컨트롤이 완전히 표시될 만큼 커야 합니다. 16:9 플레이어의 경우 가로 480픽셀, 세로 270픽셀 이상으로 지정하는 것이 좋습니다.

JS

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