rwd-iframe-wrapper()

반응형 아이프레임 래퍼 믹스인

용도

<iframe> 요소를 포함하는 컨테이너 크기에 반응하도록 할 때 사용합니다. (예: Youtube 비디오)

사용법

rwd-iframe-wrapper() 믹스인에 영상의 가로:세로 또는 세로:가로 비율을 리스트로 전달합니다.

rwd-iframe-wrapper($ratio:list)

.usage {
  @include rwd-iframe-wrapper(21 9);
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$ratio	list		16 9

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

.usage {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 42.8571428571%; /* 21:9 → 9 / 21 * 100% */
}

.usage iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

로직

rwd-iframe-wrapper() 믹스인은 다음의 로직에 의해 작성되었습니다.

@mixin rwd-iframe-wrapper($ratio: 16 9) {
  @if length($ratio) != 2 {
    @error 'rwd-iframe-wrapper() 믹스인은 영상의 너비, 높이 비율 값을 연속된 숫자 값 리스트로 전달 받습니다. → 예) @include rwd-iframe-wrapper(4 3);';
  }

  $ratio-first: first($ratio);
  $ratio-last: last($ratio);

  $min-ratio: min($ratio-first, $ratio-last);
  $max-ratio: max($ratio-first, $ratio-last);

  $aspect-ratio: $min-ratio / $max-ratio;

  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: percentage($aspect-ratio);

  iframe {
    @include absolute(t 0 l 0);
    width: 100%;
    height: 100%;
  }
}

1. rwd-img() 믹스인에 전달 받은 속성을 전달하여 호출

참고

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

• @mixin / @include

• length()

• min()

• max()

• percentage()

믹스인에 사용된 자체 제작 모듈은 다음과 같습니다.

• first()

• last()

• absolute()