Article Categories

Selected Reading

Hide a video tag on a web page - JavaScript

Javascript Web Development Front End Technology Object Oriented Programming

In JavaScript, you can hide a video element on a web page by setting its display CSS property to "none" using the style.display property.

Let's say we have the following sample video tag on a web page:

<video class="hideVideo" width="350" height="255" controls>
    <source src="" id="unique_video_id">
    You cannot play video here......
</video>

Syntax

To hide a video element, use the following syntax:

element.style.display = "none";

Method 1: Hide by Class Name

This method selects the video element by its class name and hides it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Video Example</title>
    <style>
        .hideVideo {
            display: block;
            margin: 20px;
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <h3>Video Hidden Example</h3>
    <video class="hideVideo" width="350" height="255" controls>
        <source src="sample-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <button onclick="hideVideo()">Hide Video</button>
    <button onclick="showVideo()">Show Video</button>

    <script>
        function hideVideo() {
            var video = document.getElementsByClassName("hideVideo")[0];
            video.style.display = "none";
            console.log("Video hidden");
        }
        
        function showVideo() {
            var video = document.getElementsByClassName("hideVideo")[0];
            video.style.display = "block";
            console.log("Video shown");
        }
        
        // Hide video on page load
        window.onload = function() {
            hideVideo();
        }
    </script>
</body>
</html>

Method 2: Hide by ID

You can also target the video element using its ID:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Video by ID</title>
</head>
<body>
    <h3>Hide Video by ID</h3>
    <video id="myVideo" width="350" height="255" controls>
        <source src="sample-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <button onclick="toggleVideo()">Toggle Video</button>

    <script>
        function toggleVideo() {
            var video = document.getElementById("myVideo");
            if (video.style.display === "none") {
                video.style.display = "block";
                console.log("Video is now visible");
            } else {
                video.style.display = "none";
                console.log("Video is now hidden");
            }
        }
    </script>
</body>
</html>

Method 3: Using CSS Visibility Property

Alternatively, you can use the visibility property to hide the video while maintaining its space in the layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Video with Visibility</title>
</head>
<body>
    <h3>Hide Video with Visibility Property</h3>
    <video id="visibilityVideo" width="350" height="255" controls>
        <source src="sample-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <button onclick="hideWithVisibility()">Hide (Keep Space)</button>
    <button onclick="showWithVisibility()">Show Video</button>

    <script>
        function hideWithVisibility() {
            var video = document.getElementById("visibilityVideo");
            video.style.visibility = "hidden";
            console.log("Video hidden but space preserved");
        }
        
        function showWithVisibility() {
            var video = document.getElementById("visibilityVideo");
            video.style.visibility = "visible";
            console.log("Video shown");
        }
    </script>
</body>
</html>

Comparison

Method	Property	Space Preserved	Use Case
Display None	`display = "none"`	No	Complete removal from layout
Visibility Hidden	`visibility = "hidden"`	Yes	Hide while keeping layout space

Key Points

Use display: "none" to completely remove the video from the page layout
Use visibility: "hidden" to hide the video while preserving its space
Access elements using getElementById() or getElementsByClassName()
Always check if the element exists before manipulating its properties

Conclusion

Hiding video elements in JavaScript is straightforward using the style.display or style.visibility properties. Choose display: "none" for complete removal or visibility: "hidden" to preserve layout space.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next