Hide a video tag on a web page - JavaScript

JavascriptWeb DevelopmentFront End TechnologyObject Oriented Programming

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>

To hide a video on a web page, use yourVariableName.style.display=’none’.

Example

Following is the code −

<!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>

To run the above program, save the file name “anyName.html(index.html)”. Righ click on the file and select the option “Open with Live Server” in Visual Studio Code editor.

Output

This will produce the following output on console −

In the above sample output, the video tag has been disabled. If you want to enable, just comment the above line i.e.

//hideVideo.style.display = "none";

After commenting the above line, the video tag will get enabled as shown below −

raja
Published on 09-Nov-2020 08:18:01
Advertisements