웹 개발을 하다 보면 특정 조건에 따라 비디오 요소를 화면에서 숨겨야 하는 경우가 종종 있습니다. JavaScript의 style.display 속성을 활용하면 매우 간단하게 비디오 태그를 숨기거나 다시 표시할 수 있습니다.
샘플 비디오 태그
먼저 웹 페이지에 다음과 같은 비디오 태그가 있다고 가정해 보겠습니다.
<video class="hideVideo" width="350" height="255" controls>
<source src="" id="unique_video_id">
You cannot play video here......
</video>
비디오 숨기기 방법
웹 페이지에서 비디오를 숨기려면 yourVariableName.style.display = 'none' 구문을 사용하면 됩니다. display 속성을 none으로 설정하면 해당 요소가 레이아웃에서 완전히 제거되어 화면에 나타나지 않게 됩니다.
예제 코드
다음은 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
.hideVideo {
display: block;
z-index: 999;
margin-top: 10px;
margin-left: 10px;
}
</style>
<body>
<video class="hideVideo" width="350" height="255" controls>
<source src="" id="unique_video_id">
You cannot play video here......
</video>
</body>
<script>
var hideVideo = document.getElementsByClassName("hideVideo")[0];
hideVideo.style.display = "none";
</script>
</html>
위 프로그램을 실행하려면 파일 이름을 "anyName.html"(index.html)로 저장한 뒤, Visual Studio Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 결과가 화면에 출력됩니다.
실행 결과에서 확인할 수 있듯이 비디오 태그가 화면에서 사라져 비활성화된 상태가 되었습니다. 만약 비디오를 다시 표시하고 싶다면 해당 코드를 주석 처리하기만 하면 됩니다.
//hideVideo.style.display = "none";
위 코드를 주석 처리하면 아래와 같이 비디오 태그가 다시 활성화됩니다.
추가 팁
display: none은 요소를 레이아웃에서 완전히 제거하지만, 공간은 그대로 유지한 채 시각적으로만 숨기고 싶다면 style.visibility = 'hidden'을 사용하는 것이 좋습니다. 또한 jQuery를 사용 중이라면 $('.hideVideo').hide() 한 줄로 동일한 효과를 더욱 간결하게 구현할 수 있습니다.