> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/scss-mixins/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/scss-mixins/mixins/responsive-web/rwd-iframe.md).

# rwd-iframe-wrapper()

## 용도 <a href="#use" id="use"></a>

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

## 사용법 <a href="#usage" id="usage"></a>

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

> rwd-iframe-wrapper($ratio:**list**)

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

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

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

```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%;
}
```

## 로직 <a href="#logic" id="logic"></a>

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

```javascript
@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()](/scss-mixins/mixins/responsive-web/rwd-img.md) 믹스인에 전달 받은 속성을 전달하여 호출

## 참고 <a href="#reference" id="reference"></a>

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

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [length()](https://sass-lang.com/documentation/modules/list#length)
* [min()](https://sass-lang.com/documentation/modules/math#min)
* [max()](https://sass-lang.com/documentation/modules/math#max)
* [percentage()](https://sass-lang.com/documentation/modules/math#percentage)

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

* [first()](/scss-mixins/utilities/list/first.md)
* [last()](/scss-mixins/utilities/list/last.md)
* [absolute()](/scss-mixins/mixins/position/absolute.md)