반응형 웹 페이지 디자인 - 비디오

width 속성 사용

만약 width 100%로 속성 설정된 경우, 비디오 플레이어는 응답하여 확대 및 축소됩니다:

예제

video {
  width: 100%;
  height: auto;
}

직접 시도해 보세요

위의 예제에서 비디오 플레이어는 원래 크기를 초과하여 확대될 수 있습니다. 많은 경우, max-width 속성을 사용하는 것이 더 나은 해결책입니다.

max-width 속성 사용

만약 max-width 100%로 속성 설정된 경우, 비디오 플레이어는 비율적으로 축소되지만, 원래 크기를 초과하여 확대되지 않습니다:

예제

video {
  max-width: 100%;
  height: auto;
}

직접 시도해 보세요

예제 웹 페이지에 비디오 추가

우리는 예제 웹 페이지에 비디오를 추가하고 싶습니다. 비디오는 항상 모든 사용 가능한 공간을 차지하도록 크기 조정됩니다:

예제

video {
  width: 100%;
  height: auto;
}

직접 시도해 보세요