title: html5 video tag displays an empty video box when no video is uploaded. How can I hide this empty box?
body: <p>This empty video box is unsightly and ugly.  I want the video box to be displayed only when I upload a video.</p>
  
  <p>Here is an example code where html5 video tag displays an empty video box:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;video preload="auto" width="600" height="400" controls&gt;
     &lt;source src="" type="video/mp4"&gt;
        Your browser doesn\'t support HTML 5.
   &lt;/video&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>I want to clarify that there is a variable inside the src attribute that comes from php, i.e., <code>src="'.$row["image_name"].'"</code>   My program is a realtime comment system.  In addition that an empty video box is displayed where there is no video uploaded from php mysql, when I post a comment, it does not get displayed on the screen.  I do not have the same two problems with <code>&lt;img&gt;</code> tag.  I have these two problems only with <code>&lt;video&gt;</code> tag.  </p>
  
  <p>Here I created a test case using three JavaScript variables.  There are three videos with three variables, which are inside three src attributes.  (1) The first variable has the correct path and displays the video. (2) In the second variable, I removed one letter “b” from the url to make the url incorrect.  It displays an empty video box on the screen. (3) I left the third variable empty.  This is the only one that works, i.e., it doesn’t display an empty video box.</p>
  
  <p>For the second variable, JavaScript “undefined” property doesn’t fix the problem.</p>
  
  <p>Here is the test case link to JSBin:   <a href="https://jsbin.com/bolinut/edit?html,js,output" rel="nofollow noreferrer">https://jsbin.com/bolinut/edit?html,js,output</a></p>
  
  <p>Here is the test case code:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  
   &lt;video preload="auto" width="600" height="400" controls&gt;
     &lt;source src="vid1" type="video/mp4" id="myVideo1"&gt;
        Your browser doesn\'t support HTML 5.
   &lt;/video&gt;
  
    &lt;video preload="auto" width="600" height="400" controls&gt;
     &lt;source src="vid2" type="video/mp4" id="myVideo2"&gt;
        Your browser doesn\'t support HTML 5.
   &lt;/video&gt;
  
    &lt;video preload="auto" width="600" height="400" controls&gt;
       &lt;source src="vid3" type="video/mp4" id="myVideo3"&gt;
        Your browser doesn\'t support HTML 5.
   &lt;/video&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;script&gt;
  var vid1 = document.getElementById("myVideo1");
  vid1.src = "https://www.w3schools.com/html/mov_bbb.mp4";
  
  var vid2 = document.getElementById("myVideo2");
  vid2.src = "https://www.w3schools.com/html/mov_bb.mp4";
  
  var vid3 = document.getElementById("myVideo3");
  vid3.src = "";
  
  const videos = document.getElementsByTagName('source');
  for (let i = 0; i &lt; videos.length; i++) {
    if (!videos[i].src || videos[i].src == window.location.href || videos[i].src === "undefined") {
      videos[i].parentElement.style = "display: none";
    }
  }
  &lt;/script&gt;
  
  </code></pre>