rwd-video()

반응형 비디오 믹스인

용도

<video> 요소를 포함하는 컨테이너 크기에 반응하도록 할 때 사용합니다.

사용법

rwd-video() 믹스인에 이미지 원래 크기 제한 여부, 반응하는 속성 값을 전달합니다.

rwd-video($limit-origin-size:bool, $ratio-prop:string)

.usage {
  @include rwd-video();
}

매개변수(parameter)	유형(type)	필수(required)	기본 값(default)
$limit-origin-size	bool		true
$ratio-prop	string		width

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

.usage {
  max-width: 100%;
  height: auto;
}

콘테이너 높이에 반응하는 비디오 설정 (원래 크기보다 커지지 않도록 제한)

본래 크기보다 커지지 않도록 제한하기 위해 true, 높이 속성을 반응하도록 설정하기 위해 height를 전달합니다.

.usage {
  @include rwd-video(true, height);
}

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

.usage {
  max-height: 100%;
  width: auto;
}

로직

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

@mixin rwd-video($limit-origin-size: true, $ratio-prop: width) {
  @include rwd-img($limit-origin-size, $ratio-prop);
}

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

참고

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

• @mixin / @include

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

• rwd-img()