CSS로 반응형 YouTube 동영상 삽입을 만드는 방법

CSS를 사용하여 웹사이트에 YouTube 동영상을 삽입하고 모바일에서 데스크톱 기기에 이르기까지 완벽하게 반응하도록 만드는 방법을 알아보세요.

YouTube에서 동영상 삽입 코드를 복사하면 <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%;
}

종횡비 계산

56.25% 패딩 탑은 무엇입니까? YouTube 동영상의 가로 세로 비율인 16/9를 기준으로 합니다.

비디오 컨테이너를 반응형으로 만들기 위한 정확한 패딩 값을 얻으려면 높이 값이 너비 값의 몇 %인지 알아내야 합니다.

9/16 * 100 =56.25%

9는 56.25%입니다. 16개 중.

삽입된 동영상의 가로 세로 비율이 4:3인 경우 다음과 같이 동영상 컨테이너의 상단 패딩을 계산합니다.

3/4 * 100 =75%

등등.