Question

The code below just hides the movie that I am playing behind. Remove element (if possible) or disable it, specially movie playing in background. I tried using document.video.disabled=true; but its not working. Any idea how to go around this problem please?

<script type="text/javascript">
 function showHide() {
   var div = document.getElementById('wrapper');
   if (div.style.display == 'none') {
   div.style.display = '';  
  }
 else {
   div.style.display = 'none';
  }
 }


<form id="searchForm" name = "searchForm" onSubmit = "return fetchResults();">
<input id="q" name="q" type="text" alt="Search" placeholder="Type here">
<input type="hidden" name="wt" value="json" />
<input id="submit" type="button" value="Search" onClick = "fetchResults();showHide();changeStyle();" />

<div id="wrapper" style="display:''">
<div id="left">
random text 
</div>
<div id="right">
<video width="500" height="300" controls="controls" autoplay="autoplay" name="video">
  <source src="movie.mov" type="video/mp4" />
    <embed src="movie.swf" width="600" height="500" />
 </object> 
</video>
</div>
</div>

Answer 1

Try

function showHide() {
    var div = document.getElementById('wrapper');
    div.parentNode.removeChild(div);
}