[CSS, JS] 유튜브 영상 자바스크립트로 넣기

제가 개인적으로 개발하고 있는 홈페이지가 있습니다.
이름은 Valorant Agent Profile이라고 지어놨는데...너무 뭔가 없는 것 같아서 페이지에
Fire Again (ft. Ashnikko) // 공식 뮤직 비디오 // 2022 발로란트 챔피언스
이 영상을 넣어보고자 했습니다.

원래는 이런 느낌의 페이지였는데요, 마땅히 넣을만한 곳이 아래쪽밖에 없는 것 같아서 추가해보았습니다.

줌아웃을 했더니 이런 느낌의 표현이 되네요.
일단 코드부터 살펴보겠습니다.

HTML

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

youtube라는 섹션 안에 youtubearea , youtubecover라는 영역을 구분해주었고, youtube__area 안에는 player이라는 아이디를 가진 영역이 하나 들어가 있습니다.

CSS

.youtube {
  position: relative;
  height: 700px;
  background-color: #333;
  overflow: hidden;
}
.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%;
}
.youtube .youtube__cover {
  /* background-image: url("./ACT2_VAL_KeyArt_no_text.jpg"); */
  background-color: rgba(0,0,0,.3);
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
#player {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

• youtube__area
  가로 사이즈 1920px의 크기를 가지고 있으며 position:absolute;를 통해 부모 요소의 위치에 영향을 받습니다. (따라서 부모 요소인 youtube는 position:relative;를 가지고 있어야합니다.)
  left: 50%;
  margin-left: calc(1920px / -2);
  라는 코드와
  top: 50%;
  margin-top: calc(1920px * 9 / 16 / -2);
  라는 코드를 통해서 부모 요소 youtube의 가운데에 위치하게 만들었습니다.
  또한 ::before이라는 가상요소 선택자를 통해 html이 아닌 css에서 영역을 만들어주었는데요. height: 0;이지만 padding-top: 56.25%;를 통해 16:9 비율의 영역을 만들 수 있었습니다. 왜냐하면 padding은 요소의 크기를 늘려주기 때문이죠.
  

• youtube__cover
  원래는 영상 왼쪽 오른쪽을 커버하는 이미지를 삽입하려 했습니다. 그런데 적당한 패턴 무늬를 찾지 못해서 아직까지는 크게 의미가 없는 부분이네요..

• #player
  위치가 설정된 부모 요소 youtube__area의 위치에 영향을 받습니다. 가로 세로 값을 모두 100%로 가지며 top:0; left:0;을 통해 위치를 설정했습니다.

• youtube
  overflow:hidden을 통해 영역을 벗어나는 요소들을 모두 감춰버리고 깔끔하게 만들어줬습니다.

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() {
  new YT.Player('player', {
    videoId: 'DqgK4llE1cw', 
    playerVars: {
      autoplay: true,
      loop: true,
      playlist: 'DqgK4llE1cw'
    },
    events: {
      onReady: function(event) {
        event.target.mute() //음소거
      }
    }
  });
}

iframe 삽입에 대한 YouTube Player API 참조 문서
위 문서를 참조하여 작성했습니다.
스크립트에서 player라는 id를 가진 태그를 찾고, 거기에 js에 작성된 내용에 맞추어 영상을 재생합니다. 저는 자동재생, 반복재생, 음소거 등의 내용을 작성했습니다. loop를 사용할 때에는 playlist 속성을 이용해서 같은 영상을 재생목록에 넣어줘야 된다고 하네요.

0.25배 누르시고 Rerun해주시면 더 잘 보입니다.
(사진들은 인터넷 링크가 바뀌어서 안보이네요..)