HTML DOM의 Video width 속성은 동영상 미디어의 너비(픽셀 단위)에 해당하는 숫자 값을 반환하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로도 화면에 표시되는 비디오 요소의 가로 크기를 동적으로 제어할 수 있습니다.
구문(Syntax)
width 속성의 기본 사용 구문은 다음과 같습니다.
1. 너비 값 반환하기
현재 설정된 너비를 숫자(px) 형태로 가져옵니다.
mediaObject.width
2. 너비 값 설정하기
지정한 숫자(px) 값으로 비디오의 너비를 변경합니다.
mediaObject.width = number
예제 코드
아래 예제는 버튼을 클릭할 때마다 비디오의 너비가 50px씩 늘어나도록 구현한 코드입니다. 클릭 시 현재 너비 값도 함께 화면에 출력됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video width</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-width</legend>
<video id="demo" height="200" width="170" controls><source
src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Video Not Visible">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
function getTrackDetails() {
demo.width += 50;
divDisplay.textContent = 'Video width: '+demo.width;
}
</script>
</body>
</html>실행 결과
'Video Not Visible' 버튼을 클릭하기 전의 초기 화면입니다. 비디오는 기본 너비인 170px로 표시됩니다.
버튼을 세 번 클릭하면 클릭할 때마다 너비가 50px씩 증가하여 총 150px가 더해진 320px로 비디오가 확대된 것을 확인할 수 있습니다.
정리
Video width 속성은 읽기와 쓰기가 모두 가능하며, 픽셀 단위의 정수 값을 다룹니다. 반응형 레이아웃이나 사용자 인터랙션에 따라 미디어 크기를 조절해야 하는 경우 유용하게 활용할 수 있습니다. 참고로 높이를 제어하려면 같은 방식으로 height 속성을 사용하면 됩니다.