유튜브 영상 배경 - Youtube iframe API

유튜브 API를 활용해 섹션 배경으로 유튜브 영상을 재생하도록 구현하고, 영상이 배경처럼 느껴질 수 있도록 위에 약간 투명한 배경 패턴을 깔아준다.

코드

HTML

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

CSS

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

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

.youtube .inner {
  height: 700px;
}

JS

// Youtube IFrame API를 비동기로 로드합니다.
const tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
const 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(); // 음소거
      }
    }
  });
}