title: Controls not showing on HTML5 Video when using javascript
body: <p>I have a video that I wish to display on my webpage, everything is working except the controls are not showing up. I had an issue with displaying the video in my desired width and height so I used a little javascript hack to make it so. The autoplay attribute works but when applying the controls attribute it does not seem to work. Any ideas?</p>
  
  <p>Here is my HTML</p>
  
  <pre><code>  &lt;canvas id="canvas" height="500" width="1300"&gt;
       &lt;video id="video" controls&gt;
         &lt;source src="videos/Trailer.mp4" type="video/mp4"&gt;
       &lt;/video&gt;
    &lt;/canvas&gt; 
  </code></pre>
  
  <p>and the Javascript</p>
  
  <pre><code>function updateVideo( ) {
      var canvas = document.getElementById( 'canvas' );
      var ctx = canvas.getContext( '2d' );
      var myVideo = document.getElementById( 'video' );
      ctx.drawImage( myVideo, 0, 0, 1300, 500 );
  
  }
  
  setInterval ( updateVideo, 24 );
  </code></pre>