title: Hiding HTML5 Video Controls
body: <p>im trying to implement a show and hide video element button</p>
  
  <p>Here are my two buttons alongside Play/pause/Restart</p>
  
  <pre><code>  &lt;div class="rightContent"&gt;
                &lt;p class="center"&gt;Video Control Options&lt;/p&gt;
                &lt;p class="videoControls"&gt; &lt;input type="button" value="      Play       " onclick="video.play()"/&gt; &lt;/p&gt;
                &lt;p class="videoControls"&gt; &lt;input type="button" value="     Pause       " onclick="video.pause();" /&gt; &lt;/p&gt;
                &lt;p class="videoControls"&gt; &lt;input type="button" value="    Restart      " onclick="video.currentTime =0;"/&gt; &lt;/p&gt;
                &lt;p class="videoControls"&gt; &lt;input type="button" value="  Show Controls  " onclick="Show()"/&gt; &lt;/p&gt;
                &lt;p class="videoControls"&gt; &lt;input type="button" value="  Hide Controls  " /&gt; &lt;/p&gt;  
             &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript function to attempt to Hide the controls currently:</p>
  
  <pre><code>function hide(){
                              videoControls.setAttribute = ('style', 'display:none;')
  
                      }
  </code></pre>
  
  <p>however, this does not work.</p>