Css: Fluid youtube 포함

날 따라와

유동적인 유튜브 삽입

이번 주 초 유동적인 YouTube 임베드에 대한 트윗을 읽었습니다. 그의 예에서 그는 TailwindCss을 사용했고 저는 CSS 프레임워크 팬이 아니기 때문에 일반 바닐라 CSS로 이것을 만드는 방법에 대한 게시물/비디오를 만드는 것이 좋은 생각이라고 생각했습니다. 여기 있습니다! :)

아이프레임 삽입

Youtube 임베드는 단순한 iframe에 지나지 않으므로 이를 마크업으로 추가해 보겠습니다.

<div class="fluid-yt">
  <iframe
    src="https://www.youtube.com/embed/IuhcUosPHMI"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
  ></iframe>
</div>

YouTube 웹사이트에서 이러한 iframe 임베드를 바로 가져올 수 있으며 여기서 해야 할 일은 너비 및 높이 속성을 제거하는 것뿐입니다. 이러한 고정 값은 반응형으로 만드는 데 도움이 되지 않기 때문입니다.

또한 iframe을 fluid-yt 클래스가 있는 컨테이너 div로 래핑합니다. 그런 다음 CSS에서 이 클래스를 만들 수 있습니다.

.fluid-yt {
    aspect-ratio: 16 / 9;
}

여기에서 우리는 fluid-yt 클래스를 만들고 16/9의 aspect-ratio을 제공합니다. 대부분의 비디오는 16:9 비율을 가지므로 컨테이너가 그에 맞게 높이를 조정합니다.

이제 iframe을 컨테이너와 같은 크기로 만들어야 합니다.

.fluid-yt > iframe {
    width: 100%;
    height: 100%;
}

그래서 우리는 단순히 iframe이 컨테이너 너비와 높이의 100%를 차지하도록 하여 동일한 양의 공간을 차지하도록 합니다.

그러나 함께 코딩하는 경우 비디오/iframe이 확장되지 않는다는 것을 알 수 있습니다. div의 default behavior은 가로로 가능한 한 크고 세로로 가능한 한 작아야 합니다. 이 경우 높이가 선행되고 div가 비디오만큼 높아지며 16/9 종횡비 때문에 폭을 줄여야 합니다.

고칠 수 있습니다.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
}

여기서는 컨테이너 div의 너비를 100%로 설정하고 높이를 16/9 규칙에 따라 조정합니다.

이제 완전히 반응하는 YouTube 비디오 임베드가 있습니다.

이상한 공간을 수정합니다.

우리가 그것에 있는 동안 모든 것을 완벽하게 만들기 위해 수정해야 할 작은 것이 있습니다. 지금은 보이지 않을 수도 있지만 실제로 동영상 아래에 약간의 공백이 있습니다. 대부분의 경우 문제가 되지 않지만 정렬해야 하는 경우 문제가 발생할 수 있습니다.

.fluid-yt {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: pink;
}

이를 볼 수 있도록 컨테이너에 분홍색 배경을 지정해 보겠습니다.



이것에 대한 기술적인 이유가 무엇인지 완전히 확신할 수는 없지만 iframe이 인라인 요소라는 사실 때문에 문제가 발생하므로 텍스트와 마찬가지로 하단에 약간의 공간이 생깁니다. (문제가 발생하면 이미지도 마찬가지입니다.)

.fluid-yt > iframe {
    display: block;
    width: 100%;
    height: 100%;
}

따라서 이 문제를 해결하려면 블록 표시를 제공하여 iframe을 블록 요소로 전환해야 합니다.

이제 향후 프로젝트에서 재사용할 준비가 되었습니다.

이전 브라우저에 대한 폴백

이 모든 것에 대한 브라우저 지원은 꽤 훌륭하지만 레거시 브라우저를 지원해야 하는 경우 CSS에 추가할 수 있는 더티 폴백이 있습니다. 에 의해 this github repo에서 이 스니펫을 빌렸습니다.

@supports not (aspect-ratio: 16 / 9) {
  .fluid-yt { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
  }
  .fluid-yt > iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
  }
}

모두 끝났습니다! 작업 예제는 this codepen에서 확인할 수도 있습니다.

내 구독
사줘coffee
채팅하러 오세요
더 많은 기사를 보려면 나를 따르십시오.

소중한 시간 내주셔서 감사합니다. 멋진 하루 보내세요!