최신 웹 개발 튜토리얼
 

반응 형 웹 디자인 - 비디오


폭 속성을 사용하여

경우 width 속성을 100 %로 설정, 비디오 플레이어가 반응하고 위 아래로 확장합니다 :

video {
    width: 100%;
    height: auto;
}
»그것을 자신을 시도

위의 예에서, 비디오 플레이어는 원래 크기보다 더 커야하기 위해 확장 될 수 있음을 주목하라. 더 나은 솔루션이 많은 경우에 사용하는 것 max-width 대신 속성.


최대 너비 속성을 사용하여

경우] max-width 특성을 100 %로 설정되고, 상기 비디오 플레이어는 경우에 아래로 확장되지만 원래 크기보다 크게 확장하지 않을 것이다 :

video {
    max-width: 100%;
    height: auto;
}
»그것을 자신을 시도

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

우리는 우리의 예를 들어 웹 페이지에 비디오를 추가 할 수 있습니다. 비디오는 항상 사용 가능한 모든 공간을 차지하기 위해 크기가 조정됩니다 :

video {
    width: 100%;
    height: auto;
}
»그것을 자신을 시도