..

Search

width

width

<video> 태그의 width 속성


HTML <video> 태그 ⇒


정의 및 특징

<video> 태그의 width 속성은 비디오의 너비를 픽셀(pixel) 단위로 명시합니다.

 

<video> 요소에는 언제나 height 속성과 width 속성을 명시하는 것이 좋습니다.

만약 두 속성이 명시되어 있다면, 페이지가 로드될 때 해당 비디오를 위한 적절한 크기의 영역이 미리 할당됩니다. 하지만 두 속성이 명시되어 있지 않으면 브라우저는 해당 비디오의 크기를 알 수 없으므로, 적절한 크기의 영역을 미리 할당할 수가 없습니다. 따라서 비디오가 로드되는 동안 페이지의 전체 레이아웃이 바뀌게 될 것입니다.

 

또한, height 속성과 width 속성을 사용하여 비디오의 크기를 변경하지는 말아야 합니다.

두 속성을 사용하여 크기가 큰 비디오를 작게 줄여서 페이지 내에서는 해당 비디오의 크기가 작게 보일지라도 사용자는 여전히 원본 크기의 비디오를 다운받아야만 합니다. 따라서 비디오의 크기는 비디오가 페이지에 사용되기 전에 별도의 프로그램을 사용하여 미리 변경해 놓는 것이 좋습니다.


문법

<video width="픽셀">


속성값

속성값   설명

픽셀

 

비디오의 너비를 픽셀 단위로 명시함.

ex) width="300"


예제
<video height="180" width="288" controls>
    <source src="/examples/media/sample_video_ogg.ogg" type="video/ogg">
    <source src="/examples/media/sample_video_mp4.mp4" type="video/mp4">
    이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

width 3.0 지원함 9.0 3.5 3.1 10.5

HTML5에서 변경된 사항

<video> 태그는 HTML5에서 새롭게 추가된 요소입니다.


연습문제