CSS만으로 반응형 유튜브 동영상 삽입하기

CSS를 활용해 웹사이트에 유튜브 동영상을 삽입하고, 모바일부터 데스크톱까지 어떤 기기에서든 완벽하게 반응형으로 표시되도록 만드는 방법을 소개합니다.

유튜브에서 동영상 퍼가기 코드를 복사하면 아래와 같은 형태의 <iframe> 코드를 얻게 됩니다.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/uga8GWzdv3c"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

그런데 여기서 문제가 있습니다. iframe은 브라우저에서 올바른 화면 비율로 표시되기 위해 고정된 너비와 높이가 필요합니다. 그래서 iframe은 기본 상태로는 반응형 디자인과 잘 맞지 않습니다.

다행히 해결 방법은 간단합니다. iframe을 부모 컨테이너 요소로 감싸주기만 하면 됩니다.

<div class="youtube-video-container">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/uga8GWzdv3c"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

그다음 CSS로 동영상 컨테이너에 스타일을 지정합니다.

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

화면 비율(Aspect Ratio) 계산 방법

56.25%라는 padding-top 값이 어디서 나온 것인지 궁금하실 수 있습니다. 이 값은 유튜브 동영상의 기본 화면 비율인 16:9에서 유래한 것입니다.

동영상 컨테이너를 반응형으로 만들기 위한 정확한 패딩 값을 구하려면, 높이 값이 너비 값의 몇 퍼센트에 해당하는지만 계산하면 됩니다.

9 / 16 * 100 = 56.25%

즉, 9는 16의 56.25%입니다.

만약 삽입하려는 동영상의 화면 비율이 4:3이라면, 다음과 같이 컨테이너의 상단 패딩 값을 계산합니다.

3 / 4 * 100 = 75%

이런 식으로 어떤 화면 비율이든 같은 공식으로 손쉽게 계산할 수 있습니다.