반응형 웹 디자인 - 비디오
너비 속성 사용
속성이 100%로 설정 되면 width
비디오 플레이어가 반응하고 확장 및 축소됩니다.
예시
video {
width: 100%;
height: auto;
}
위의 예에서 비디오 플레이어는 원래 크기보다 크게 확장될 수 있습니다. 많은 경우에 더 나은 솔루션은
max-width
속성을 대신 사용하는 것입니다.
max-width 속성 사용
속성이 100%로 설정된 경우 max-width
비디오 플레이어는 필요한 경우 축소되지만 원래 크기보다 크게 확대되지는 않습니다.
예시
video {
max-width: 100%;
height: auto;
}
예제 웹 페이지에 비디오 추가
예제 웹 페이지에 비디오를 추가하고 싶습니다. 비디오는 항상 사용 가능한 모든 공간을 차지하도록 크기가 조정됩니다.
예시
video {
width: 100%;
height: auto;
}